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

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

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

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

JavaScript

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

解決済

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

s-ueshi
s-ueshi

総合スコア3

CSS3

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

JavaScript

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

1回答

0評価

1クリップ

165閲覧

投稿2022/07/05 07:29

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

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

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

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

HTML5

  <main> <div class="load"></div> </main>

SCSS

main { position: relative; overflow: hidden; //anime.jsを使用した円の出し方 .load { display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; background: #fcfcf3; } .block { display: inline-block; position: absolute; width: 50px; height: 50px; border-radius: 50%;   //アニメーションCSSによるフェード animation: fadein 8s ease ; transition-property: animation; animation-iteration-count: 3; } @keyframes fadein { 0% { opacity: 0; } 50% { opacity: 0.8; } 100% { opacity: 0; } } }

JavaScript

window.addEventListener('DOMContentLoaded', function() { let load = this.document.querySelector('.load'); //30個のカラフルな円を出現させる繰り返し条件 function colorCircles() { for(let i=0; i<30; i++) { let blocks = this.document.createElement('div'); blocks.classList.add('block'); //HTMLドキュメントに"block"クラスを持つdiv要素の追加 load.appendChild(blocks); //anime.jsでblockクラスの円をカスタム anime ({ targets: '.block', translateX: function() { return anime.random(-700, 700); }, translateY: function() { return anime.random(-450, 450); }, scale: function() { return anime.random(1,3); }, }); } } colorCircles(); });

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

HTML5

<main> <div class="load2"></div> </main>

SCSS

main { position: relative; overflow: hidden; //anime.js未使用の円の出し方 .load2 { width: 100%; height: 100vh; background: #fcfcf3; overflow: hidden; } }

JavaScript

window.addEventListener('DOMContentLoaded', function() { let load2 = this.document.querySelector('.load2'); function colorfulBalloon(n, max, min) { let balloon = document.createElement("div"); balloon.className = "balloon"; balloon.style.borderRadius = "50%"; balloon.style.position = "absolute"; for ( let i=0; i<n; i++ ) { let balloonClone = balloon.cloneNode(); let size = Math.random() * (max - min) + min; balloonClone.style.top = "calc(" + -1 * size * Math.random() + "px + " + Math.random() * 100 + "%)"; balloonClone.style.left = "calc(" + -1 * size * Math.random() + "px + " + Math.random() * 100 + "%)"; balloonClone.style.width = size + "px"; balloonClone.style.height = size + "px"; load2.appendChild(balloonClone); } } //実行 colorfulBalloon(10, 150, 50); });

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

s-ueshi

2022/07/06 06:31

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

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

CSS3

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

JavaScript

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