質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

【JavaScript】毎回ランダムな位置を取りつつ大小様々な円を点灯させたい

s-ueshi
s-ueshi

総合スコア4

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

0グッド

1クリップ

317閲覧

投稿2022/07/05 07:29

生のJavaScriptでの記述練習を行っています。
今回実装したい動きは、
①大小さまざまな円をランダムな位置にランダムな個数(~30個)発生させる
②fadeIn → fadeOut でゆっくり点灯
上記を一回の動作としてこれを繰り返すような動きを取り入れたいと考えております。

現在①については実装できたのですが、
点灯後における円の位置・個数のリセットができずに困っています。

質問は、
①fade機能の適切な実装方法(生JavaScript または CSSアニメーション)
②点灯終了後、また新たに円の再設定から始まる繰り返し処理の記述方法
についてご教示願います。

下記ソースコードになります。

HTML5

1  <main> 2 <div class="load"></div> 3 </main>

SCSS

1main { 2 position: relative; 3 overflow: hidden; 4 //anime.jsを使用した円の出し方 5 .load { 6 display: flex; 7 justify-content: center; 8 align-items: center; 9 width: 100%; 10 height: 100vh; 11 background: #fcfcf3; 12 } 13 .block { 14 display: inline-block; 15 position: absolute; 16 width: 50px; 17 height: 50px; 18 border-radius: 50%; 19  //アニメーションCSSによるフェード 20 animation: fadein 8s ease ; 21 transition-property: animation; 22 animation-iteration-count: 3; 23 } 24 @keyframes fadein { 25 0% { 26 opacity: 0; 27 } 28 50% { 29 opacity: 0.8; 30 } 31 100% { 32 opacity: 0; 33 } 34 } 35}

JavaScript

1window.addEventListener('DOMContentLoaded', function() { 2 3 let load = this.document.querySelector('.load'); 4 5 //30個のカラフルな円を出現させる繰り返し条件 6 function colorCircles() { 7 for(let i=0; i<30; i++) { 8 let blocks = this.document.createElement('div'); 9 blocks.classList.add('block'); 10 //HTMLドキュメントに"block"クラスを持つdiv要素の追加 11 load.appendChild(blocks); 12 13 //anime.jsでblockクラスの円をカスタム 14 anime ({ 15 targets: '.block', 16 translateX: function() { 17 return anime.random(-700, 700); 18 }, 19 translateY: function() { 20 return anime.random(-450, 450); 21 }, 22 scale: function() { 23 return anime.random(1,3); 24 }, 25 }); 26 } 27 } 28 colorCircles(); 29});

このソースコードでは新しく円を生成できないと同時に、
anime.js特有の動き(中心からぶわっと円が放散するような動き※CSSアニメーションでfadeを付けたらなくなりました)があったので、
anime.jsを使用しない円のカスタム方法も作ったので下記に載せておきます

HTML5

1 <main> 2 <div class="load2"></div> 3 </main>

SCSS

1main { 2 position: relative; 3 overflow: hidden; 4 5 //anime.js未使用の円の出し方 6 .load2 { 7 width: 100%; 8 height: 100vh; 9 background: #fcfcf3; 10 overflow: hidden; 11 } 12}

JavaScript

1window.addEventListener('DOMContentLoaded', function() { 2 3 let load2 = this.document.querySelector('.load2'); 4 5 function colorfulBalloon(n, max, min) { 6 let balloon = document.createElement("div"); 7 balloon.className = "balloon"; 8 balloon.style.borderRadius = "50%"; 9 balloon.style.position = "absolute"; 10 11 for ( let i=0; i<n; i++ ) { 12 let balloonClone = balloon.cloneNode(); 13 14 let size = Math.random() * (max - min) + min; 15 16 balloonClone.style.top = "calc(" + -1 * size * Math.random() + "px + " + Math.random() * 100 + "%)"; 17 balloonClone.style.left = "calc(" + -1 * size * Math.random() + "px + " + Math.random() * 100 + "%)"; 18 balloonClone.style.width = size + "px"; 19 balloonClone.style.height = size + "px"; 20 load2.appendChild(balloonClone); 21 } 22 } 23 //実行 24 colorfulBalloon(10, 150, 50); 25});

こちらはfadeを実装できておりません。
長くなりましたが、何卒よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

s-ueshi

2022/07/06 06:31

Lhankor_Mhyさん そうです!そのライブラリを使用しております。 その部分の記載をしていなかったですね、申し訳ございません。

回答1

0

ベストアンサー

①fade機能の適切な実装方法(生JavaScript または CSSアニメーション)

 何をもって適切というかは難しいですが、CSS transition、CSS animation、Web Animations API あたりが標準的かと思います。


②点灯終了後、また新たに円の再設定から始まる繰り返し処理の記述方法

 CSSを使った場合は、transitionend イベント、animationend イベントなどを拾って、現在の描画を消して、再生成すればいいかと思います。

 また、アニメーションの時間が決まっているならば、setTimeout などで時間を決め打ちして再生成するという簡易的なやり方をしてもいいかもしれません。

 Web Animations API を使った場合でも、イベントを受けて処理するか、あるいは Promise を受けて処理するのもいいかもしれません。


 ここでは元コードを尊重して、CSS animation と animationend で作ったサンプルを置いておきます。

https://jsfiddle.net/Lhankor_Mhy/2mkxLj93/

js

1//... 2 function blink(){ 3 document.querySelector('.load2').innerHTML =""; 4 for ( let i=0; i<n; i++ ) { 5 let balloonClone = balloon.cloneNode(); 6 7 let size = Math.random() * (max - min) + min; 8 9 balloonClone.style.top = "calc(" + -1 * size * Math.random() + "px + " + Math.random() * 100 + "%)"; 10 balloonClone.style.left = "calc(" + -1 * size * Math.random() + "px + " + Math.random() * 100 + "%)"; 11 balloonClone.style.width = size + "px"; 12 balloonClone.style.height = size + "px"; 13 load2.appendChild(balloonClone); 14 } 15 document.querySelector('.load2 .balloon').addEventListener('animationend',blink); 16 } 17 18 blink(); 19//...

scss

1//... 2 .balloon{ 3 animation: fadein 8s ease ; 4 transition-property: animation; 5 animation-iteration-count: 3; 6 background: #000; 7 } 8 @keyframes fadein { 9 0% { 10 opacity: 0; 11 } 12 50% { 13 opacity: 0.8; 14 } 15 100% { 16 opacity: 0; 17 } 18 } 19//...

参考:
Web Animations API を利用する - Web API | MDN

HTMLElement: transitionend イベント - Web API | MDN
HTMLElement: animationend イベント - Web API | MDN

投稿2022/07/06 08:51

編集2022/07/06 08:53
Lhankor_Mhy

総合スコア33635

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

s-ueshi

2022/07/06 13:08

思い描いていた動作になりました!お時間いただきましてありがとうございました。 CSSアニメーションとjsの連動に少し悩んでいたのですが、 恥ずかしながらtransitionend/animationendイベントを初めて知り目からウロコです、、 参考まで掲載していただきありがとうございます。 これで終わらせず、次に活かせるよう勉強します!

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。