JavaScriptとCSSでキラキラ輝く星空エフェクトを作成してみましたので、実装コードの紹介とコードの解説をしていきます。
- jQueryなし
- プラグインなし
- コピペのみで実装可能
今回はプラグインやjQuery等を使用せず作成してきますので、ぜひ参考にしてみてください。
キラキラ輝く星空のDEMOページ
実装DEMOページを作成しましたので、こちらから確認してください。
DEMOが確認できたら、次はコピペ用のコード一式を紹介していきます。
【コピペ用】キラキラ輝く星空エフェクトの実装コード一式
以下にHTML・CSS・JavaScriptのコード全体を用意しました。
それぞれをコピペするとすぐにお使いいただけます。
<div class="stars">
<!-- ここにコンテンツを入れる -->
</div>/* 星空の背景のスタイル */
.stars {
position: relative;
width: 100%; /* 星空の横幅 */
height: 100vh; /* 星空の縦幅 */
background-image: linear-gradient(0deg, #00dedc, #115d89, #080f1c); /* 星空の背景色 */
overflow: hidden; /* 星が枠外にはみ出すのを防ぐ */
}
/* 星のスタイル */
.star {
position: absolute;
display: block;
background-color: #fff; /* 星の色 */
border-radius: 50%;
box-shadow: 0 0 4px 2px rgba(#fff, 0.2); /* 星の影 */
opacity: 0;
animation: twinkle 5s infinite;
}
/* 星がキラキラ光るアニメーション */
@keyframes twinkle {
0% {
opacity: 0;
}
50% {
transform: scale(1.1);
opacity: 1;
}
100% {
opacity: 0;
transform: scale(1);
}
}window.addEventListener("DOMContentLoaded", () => {
// 星を表示するための親要素を取得
const stars = document.querySelector(".stars");
// 星を生成する関数
const createStar = () => {
const starEl = document.createElement("span");
starEl.className = "star";
const minSize = 1; // 星の最小サイズを指定
const maxSize = 2; // 星の最大サイズを指定
const size = Math.random() * (maxSize - minSize) + minSize;
starEl.style.width = `${size}px`;
starEl.style.height = `${size}px`;
starEl.style.left = `${Math.random() * 100}%`;
starEl.style.top = `${Math.random() * 100}%`;
starEl.style.animationDelay = `${Math.random() * 10}s`;
stars.appendChild(starEl);
};
// for文で星を生成する関数を指定した回数呼び出す
for (let i = 0; i <= 500; i++) {
createStar();
}
});
以上で全体のコードの紹介は終わりです！
次の章では、コードを理解したい・カスタマイズしたいという方のために、実装コードの解説をしていきます。
【解説】キラキラ輝く星空エフェクトの実装コードの解説
ここからは実装コードの解説をしていきます。
HTMLの解説
まずはHTMLから見ていきましょう。
HTMLでは、星を表示するための親要素を用意するだけで終わりです。
<div class="stars">
<!-- ここにコンテンツを入れる -->
</div>ここではstarsというクラスをつけたdivを用意しました。
このdivの背景に星が表示されるようになります。
中には自由にコンテンツを入れてください。
CSSの解説
続いてはCSSの解説です。
/* 星空の背景のスタイル */
.stars {
position: relative;
width: 100%; /* 星空の横幅 */
height: 100vh; /* 星空の縦幅 */
background-image: linear-gradient(0deg, #00dedc, #115d89, #080f1c); /* 星空の背景色 */
overflow: hidden; /* 星が枠外にはみ出すのを防ぐ */
}
/* 星のスタイル */
.star {
position: absolute;
display: block;
background-color: #fff; /* 星の色 */
border-radius: 50%;
box-shadow: 0 0 4px 2px rgba(#fff, 0.2); /* 星の影 */
opacity: 0;
animation: twinkle 5s infinite;
}
/* 星がキラキラ光るアニメーション */
@keyframes twinkle {
0% {
opacity: 0;
}
50% {
transform: scale(1.1);
opacity: 1;
}
100% {
opacity: 0;
transform: scale(1);
}
}CSSは少し長めなので、以下の3つに分けて解説していきます
- 星空の背景のスタイル
- 星のスタイル
- 星がキラキラ光るアニメーション
星空の背景のスタイル
ここでは、星空の背景となる要素のスタイルを指定していきます。
HTML上のstarsの部分ですね。
.stars {
position: relative;
width: 100%; /* 星空の横幅 */
height: 100vh; /* 星空の縦幅 */
background-image: linear-gradient(0deg, #00dedc, #115d89, #080f1c); /* 星空の背景色 */
overflow: hidden; /* 星が枠外にはみ出すのを防ぐ */
}ここでの必須プロパティは、以下の二つです。
position: relateive…星の要素をposition: absoluteで絶対位置指定するために必要overflow: hidden…星の要素が枠外にはみ出すのを防ぐのに必要
これら以外は自由に指定可能なので、背景色や大きさなどは各自カスタマイズしてください。
星のスタイル
続いては、星のスタイルを指定していきます。
星ひとつひとつの要素は、starクラスがついたspanタグをJavaScriptで量産するので、ここではstarクラスに対してスタイルを当てていきます。
.star {
position: absolute;
display: block;
background-color: #fff; /* 星の色 */
border-radius: 50%; /* 角丸 */
box-shadow: 0 0 4px 2px rgba(#fff, 0.2); /* 星の影 */
opacity: 0; /* 初期状態では透明にしておく */
animation: twinkle 5s infinite;
}上記が最低限必要なスタイルです。
星の背景色はbackground-colorに好きな色を指定してください。
box-shadowを指定することで、星が光を放っているような効果をつけることができます。
width, height, left, top, animation-delayは、JavaScriptでランダムな数値を指定するので、ここでは指定しません。
星がキラキラ光るアニメーション
最後に、星がキラキラ光るアニメーションを作成していきます。
@keyframes twinkle {
0% {
opacity: 0;
}
50% {
transform: scale(1.1);
opacity: 1;
}
100% {
opacity: 0;
transform: scale(1);
}
}まず0%の時点では、星を透明にしておきます。
続いて50%に近づくにつれてscaleで徐々に大きくし、さらにopacity: 1を指定して星が徐々に現れるようにします。
最後に、100%の時点では再びサイズをもとに戻し、透明にしていきます。
これで、星がキラキラ光って消えるアニメーションを作成することができました。
starクラスに対して、以下のような指定をしましたね。
animation: twinkle 5s infinite;これは作成したアニメーションtwinkleを5秒間隔で無限に繰り返すという意味になります。
5sの部分を変えることでアニメーションの速度を調整できますので、いろいろ試してみてください。
これでCSSの解説は終わりです！
JavaScriptの解説
最後に、JavaScriptの解説を見ていきましょう。
まずはコード全体をもう一度確認してみます。
window.addEventListener("DOMContentLoaded", () => {
// 星を表示するための親要素を取得
const stars = document.querySelector(".stars");
// 星を生成する関数
const createStar = () => {
const starEl = document.createElement("span");
starEl.className = "star";
const minSize = 1; // 星の最小サイズを指定
const maxSize = 2; // 星の最大サイズを指定
const size = Math.random() * (maxSize - minSize) + minSize;
starEl.style.width = `${size}px`;
starEl.style.height = `${size}px`;
starEl.style.left = `${Math.random() * 100}%`;
starEl.style.top = `${Math.random() * 100}%`;
starEl.style.animationDelay = `${Math.random() * 10}s`;
stars.appendChild(starEl);
};
// for文で星を生成する関数を指定した回数呼び出す
for (let i = 0; i <= 500; i++) {
createStar();
}
});
JavaScriptでは、以下のような処理をしています。
- 星を表示するための親要素を取得
starクラスのついたspanタグを生成starのwidth・heightにランダムな数値を指定（星のサイズをバラバラにする）starのleft・topにランダムな数値を指定（星の発生位置をバラバラにする）starのanimation-delayにランダムな秒数を指定（星の発生タイミングをバラバラにする）- 完成した
starをappendChildで親要素に追加する for文で星を指定した数だけ量産する
これらのコードを順番に見ていきましょう。
①星を表示するための親要素を取得
まずは星を表示するための親要素を取得します。
HTMLで、starsというクラスのついたdivを作成しましたね。
ここではquerySelectorを使ってstarsを取得します。
const stars = document.querySelector(".stars");②spanタグを生成しstarクラスをつける
続いては、星を生成する関数createStarの中身を作っていきます。
const starEl = document.createElement("span");
starEl.className = "star";createElementでspanタグを生成し、starというクラスを付与します。
③星の横幅・縦幅にランダムな数値を指定する
次は星のサイズを指定していきます。
const minSize = 1; // 星の最小サイズを指定
const maxSize = 2; // 星の最大サイズを指定
const size = Math.random() * (maxSize - minSize) + minSize;
starEl.style.width = `${size}px`;
starEl.style.height = `${size}px`;星のサイズはランダムにしたいので、minSizeには最小サイズを、maxSizeには最大サイズを指定し、Math.random()で乱数を生成します。
生成した乱数をそのままwidthとheightのstyle属性に付与することで、星の大きさがランダムになります。
このminSizeとmaxSizeには、各自好きな数値を入れてください。
④星のtop・leftにランダムな数値を指定する
続いては星の発生位置をばらけさせるために、topとleftプロパティにランダムな数値を指定します。
starEl.style.left = `${Math.random() * 100}%`;
starEl.style.top = `${Math.random() * 100}%`;この指定をすることで、leftとtopには0~100%の間のランダムな数値が入ることになります。
また、%での指定なので、レスポンシブ対応もできています。
これでいい感じに星がランダムな位置に配置されるようになりました。
⑤星のanimation-delayにランダムな秒数を指定する
続いては、animation-delayにランダムな秒数を指定します。
starEl.style.animationDelay = `${Math.random() * 10}s`;この指定がないと、全ての星が一斉に表示され、一斉に消えてしまいます。
これだと少し不自然なので、animation-delayにランダムな秒数を当てることで、アニメーションの開始タイミングをズラしています。
これで星がバラバラのタイミングで光るようになりました。
⑥完成した星を親要素に追加する
これで星の要素は完成したので、あとは親要素に追加します。
stars.appendChild(starEl);最初に取得しておいた親要素starsに対して、appendChildで星の要素starElを追加します。
これで星を生成する関数createStarが完成しました。
⑦for文で指定した数の星を量産する
最後に、完成した関数createStarをfor文を使って呼び出します。
for (let i = 0; i <= 500; i++) {
createStar();
}500の部分に指定した数だけ星が生成されるので、ここの数値は各自で調整してください。
あまり多すぎると処理が重くなるので、なるべく少なめに抑えるのがいいかと思います。
以上でJavaScriptの解説は終わりです！
【まとめ】JSとCSSでキラキラ輝く星空エフェクトを実装する方法
JSとCSSで、星がキラキラ光るエフェクトを実装する方法を紹介しました。
星空は背景画像でも実装可能ですが、もし動きのある星空を作成したい場合は、ぜひこの記事の方法を試してみてください！
コメント