ページ上にカラフルな落ち葉を舞わせるエフェクトを実装しましたので、紹介していこうと思います。
ここではjQueryやプラグインは使わず、CSSと素のJavaScriptのみで実装していくので、興味がある方はぜひ読んでみてください。
落ち葉を舞わせるエフェクトのDEMOページ
今回の実装内容を確認するために、DEMOページをご覧ください。
3種類の葉っぱをランダムサイズで降らせるエフェクトを実装しています。
実装内容が確認できたら、次でコードを見ていきましょう。
【コピペ用】落ち葉を舞わせるエフェクトの実装コード
すべてのコードと必要な画像ファイルを用意しましたので、コピペしてお使いください。
index.html style.css main.js ファイルを作成し、以下のコードを貼り付けると使用できます。
画像は以下からダウンロードできるので、imgフォルダを作成して画像を追加してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Autumn Leaves DEMO</title>
<link rel="stylesheet" href="style.css"><!-- CSS読み込み -->
</head>
<body>
<div class="leaves-container">
<!-- ここにコンテンツを入れる -->
</div>
<script src="main.js"></script><!-- JS読み込み -->
</body>
</html>/* ===== 落ち葉を表示するコンテナのスタイル ===== */
.leaves-container {
position: relative;
height: 100vh; /* コンテナの高さ */
width: 100%; /* コンテナの横幅 */
overflow: hidden; /* コンテナからはみ出した要素を隠す */
}
/* ===== 落ち葉のスタイル ===== */
/* 落ち葉の共通スタイル */
.leaf {
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
position: absolute;
animation: animate-leaf 8s linear;
}
/* 落ち葉1 */
.leaf-1 {
background-image: url('img/leaf-1.svg'); /* 任意のパスを記入 */
}
/* 落ち葉2 */
.leaf-2 {
background-image: url('img/leaf-2.svg'); /* 任意のパスを記入 */
}
/* 落ち葉3 */
.leaf-3 {
background-image: url('img/leaf-3.svg'); /* 任意のパスを記入 */
}
/* ===== 落ち葉が降るアニメーション ===== */
@keyframes animate-leaf {
0% {
opacity: 0;
top: 0;
transform: rotate(0);
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
top: 100vh;
transform: rotate(1080deg);
}
}window.addEventListener('DOMContentLoaded', ()=> {
// コンテナを指定
const container = document.querySelector('.leaves-container');
// 葉っぱを生成する関数
const createLeaf = (leafClass, minSizeVal, maxSizeVal) => {
const leafEl = document.createElement('span');
leafEl.className = `leaf ${leafClass}`;
const minSize = minSizeVal;
const maxSize = maxSizeVal;
const size = Math.random() * (maxSize + 1 - minSize) + minSize;
leafEl.style.width = `${size}px`;
leafEl.style.height = `${size}px`;
leafEl.style.left = Math.random() * 100 + '%';
container.appendChild(leafEl);
// 一定時間が経てば葉っぱを消す
setTimeout(() => {
leafEl.remove();
}, 8000);
}
// 葉っぱを生成する間隔をミリ秒で指定する
// createLeafの引数には、'クラス名', '最小サイズ', '最大サイズ'を渡す
setInterval(createLeaf.bind(this, 'leaf-1', 30, 50), 1000);
setInterval(createLeaf.bind(this, 'leaf-2', 30, 50), 1000);
setInterval(createLeaf.bind(this, 'leaf-3', 30, 50), 1000);
});コピペするだけで使えますが、カスタマイズやコードの解説が見たい方はこのまま読み進めてください。
落ち葉を舞わせるエフェクトの実装手順とコードの解説
まずはHTML, CSS, JavaScriptそれぞれの役割から確認しましょう。
- HTMLで落ち葉を表示するコンテナを作る
- CSSで落ち葉の見た目とアニメーションを設定する
- JSで落ち葉をランダムサイズで生成してDOMに追加する
次で実際のコードを見ながら解説していきます！
HTMLで落ち葉を表示するコンテナを用意する
<div class="leaves-container">
<!-- ここにコンテンツを入れる -->
</div>まずは落ち葉を表示する場所を作ります。
divタグを用意し、leaves-containerというクラスを付けます。
このコンテナの背景に落ち葉が舞うことになるので、コンテナ内には好きな要素を入れてください。
葉っぱの要素はJavaScriptで生成＆追加するので、HTMLはこれで終わりです。
CSSで葉っぱの見た目とアニメーションを設定する
/* ===== 落ち葉を表示するコンテナのスタイル ===== */
.leaves-container {
position: relative;
height: 100vh; /* コンテナの高さ */
width: 100%; /* コンテナの横幅 */
overflow: hidden; /* コンテナからはみ出した要素を隠す */
}
/* ===== 落ち葉のスタイル ===== */
/* 落ち葉の共通スタイル */
.leaf {
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
position: absolute;
animation: animate-leaf 8s linear;
}
/* 落ち葉1 */
.leaf-1 {
background-image: url('img/leaf-1.svg'); /* 任意のパスを記入 */
}
/* 落ち葉2 */
.leaf-2 {
background-image: url('img/leaf-2.svg'); /* 任意のパスを記入 */
}
/* 落ち葉3 */
.leaf-3 {
background-image: url('img/leaf-3.svg'); /* 任意のパスを記入 */
}
/* ===== 落ち葉が降るアニメーション ===== */
@keyframes animate-leaf {
0% {
opacity: 0;
top: 0;
transform: rotate(0);
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
top: 100vh;
transform: rotate(1080deg);
}
}こちらがCSSコード全体です。
- 落ち葉を表示するコンテナのスタイル
- 落ち葉のスタイル
- 落ち葉に適用するアニメーションの設定
この3つに分かれるので、ひとつずつ説明していきますね。
落ち葉を表示するコンテナのスタイル
.leaves-container {
position: relative;
height: 100vh; /* コンテナの高さ */
width: 100%; /* コンテナの横幅 */
overflow: hidden; /* コンテナからはみ出した要素を隠す */
}まずはコンテナのスタイルからです。
widthとheightは、プロジェクトに合わせて任意の数値を記入してください。
positionプロパティは、static以外の値を設定します。
こうすることで、コンテナを基準に落ち葉の要素を配置することができますね。
overflow: hiddenは、コンテナからはみ出した落ち葉を非表示にするのに必要なので、設定しておきましょう。
落ち葉のスタイル
/* 落ち葉の共通スタイル */
.leaf {
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
position: absolute;
animation: animate-leaf 8s linear;
}
/* 落ち葉1 */
.leaf-1 {
background-image: url('img/leaf-1.svg'); /* 任意のパスを記入 */
}
/* 落ち葉2 */
.leaf-2 {
background-image: url('img/leaf-2.svg'); /* 任意のパスを記入 */
}
/* 落ち葉3 */
.leaf-3 {
background-image: url('img/leaf-3.svg'); /* 任意のパスを記入 */
}続いて、落ち葉の要素のスタイルを設定していきましょう。
ここでは4つのクラスがありますが、
- 3種類の落ち葉に共通しているスタイル
- 落ち葉1専用のスタイル
- 落ち葉2専用のスタイル
- 落ち葉3専用のスタイル
という風になっています。
まず3つの落ち葉に共通するスタイルをleafクラスにまとめましょう。
それからleaf-1 leaf-2 leaf-3というクラスを作成し、それぞれ別々の画像を指定します。
<div class="leaves-container">
<span class="leaf leaf-1"></span>
<span class="leaf leaf-2"></span>
<span class="leaf leaf-3"></span>
</div>HTML上では、このようにそれぞれに2つのクラスがつくようになりますね。
これで落ち葉の見た目は完成です。
落ち葉に適用するアニメーションの設定
@keyframes animate-leaf {
0% {
opacity: 0;
top: 0;
transform: rotate(0);
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
top: 100vh;
transform: rotate(1080deg);
}
}最後に、落ち葉に指定するアニメーションを作成していきます。
DEMOページを見ていただくとわかりますが、落ち葉には、
- 落ち葉を回転させる
- 落ち葉を上から下に移動させる
- 開始時にフェードインさせ、終了時はフェードアウトさせる
というアニメーションが設定されています。
それぞれどのような指定がされているか見ていきましょう。
落ち葉を回転させるアニメーションを設定
0% {
transform: rotate(0);
}
100% {
transform: rotate(1080deg);
}落ち葉を回転させるには、transformプロパティのrotateを使用します。
0%はアニメーション開始時、100%はアニメーション終了時ということになるので、開始から終了までに1080度回転させるという指定をしています。
360degごとに1回転なので、ここではちょうど3周回転させるということになりますね。
この数値を増減させることで、葉っぱが下に落ちるまでに何回転させるかを指定できます。
落ち葉を上から下に移動させるアニメーションを設定
0% {
top: 0;
}
100% {
top: 100vh;
}落ち葉を上から下に移動させるのは、topの値を調整します。
まず開始時はtop: 0にすることで、コンテナの一番上に葉っぱを設置しています。
そして終了時にはtop: 100vh、つまりコンテナの一番下に移動させているということですね。
この終了時の値は、コンテナの高さによって変更する必要がありますので、各自調整してください。
開始時にフェードインさせ、終了時はフェードアウトさせる
0% {
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}開始時と終了時は透明にすることで、フェードイン・フェードアウトのエフェクトをかけることができます。
これが必要ないという場合は、opacity自体を削除してください。
これで落ち葉にかけるアニメーションは完成です！
完成したアニメーションを落ち葉に適用する
完成したアニメーションは、leafクラスに指定します。
.leaf {
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
position: absolute;
animation: animate-leaf 8s linear;
}ここではアニメーションの実行時間を8秒に指定しています。
この数値を調整するとアニメーションの時間を変更できるので、プロジェクトに合わせてカスタマイズしてください。
これでCSSは終わりです！
JavaScriptでランダムサイズの落ち葉を自動生成してDOMに追加する
window.addEventListener('DOMContentLoaded', ()=> {
// コンテナを指定
const container = document.querySelector('.leaves-container');
// 葉っぱを生成する関数
const createLeaf = (leafClass, minSizeVal, maxSizeVal) => {
const leafEl = document.createElement('span');
leafEl.className = `leaf ${leafClass}`;
const minSize = minSizeVal;
const maxSize = maxSizeVal;
const size = Math.random() * (maxSize + 1 - minSize) + minSize;
leafEl.style.width = `${size}px`;
leafEl.style.height = `${size}px`;
leafEl.style.left = Math.random() * 100 + '%';
container.appendChild(leafEl);
// 一定時間が経てば葉っぱを消す
setTimeout(() => {
leafEl.remove();
}, 8000);
}
// 葉っぱを生成する間隔をミリ秒で指定する
// createLeafの引数には、'クラス名', '最小サイズ', '最大サイズ'を渡す
setInterval(createLeaf.bind(this, 'leaf-1', 30, 50), 1000);
setInterval(createLeaf.bind(this, 'leaf-2', 30, 50), 1000);
setInterval(createLeaf.bind(this, 'leaf-3', 30, 50), 1000);
});最後にJavaScriptのコードを見ていきましょう。
少し長いのでいくつかに分けて解説します。
3行目：落ち葉を舞わせるコンテナを取得する
const container = document.querySelector('.leaves-container');まずは落ち葉を表示するコンテナをJavaScriptで取得しましょう。
HTML上のleaves-containerクラスが付いたdivをquerySelectorで選択します。
6~21行目：落ち葉を生成する関数を作成する
// 葉っぱを生成する関数
const createLeaf = (leafClass, minSizeVal, maxSizeVal) => {
// ①葉っぱの要素を作成しクラスを付ける
const leafEl = document.createElement('span');
leafEl.className = `leaf ${leafClass}`;
// ②葉っぱの最小・最大サイズの間からランダムなサイズを指定する
const minSize = minSizeVal;
const maxSize = maxSizeVal;
const size = Math.random() * (maxSize + 1 - minSize) + minSize;
leafEl.style.width = `${size}px`;
leafEl.style.height = `${size}px`;
// ③葉っぱのX軸方向の発生位置をランダム指定する
leafEl.style.left = Math.random() * 100 + '%';
// ④完成した葉っぱの要素をコンテナに追加する
container.appendChild(leafEl);
// ⑤一定時間が経てば葉っぱを消す
setTimeout(() => {
leafEl.remove();
}, 8000);
}続いて、実際に落ち葉を生成する関数createLeafを見ていきましょう。
まずこの関数は、3つの引数をとります。
const createLeaf = (leafClass, minSizeVal, maxSizeVal) => {
// 中身は省略
}leafClassにはleaf-1 leaf-2 leaf-3などの落ち葉のクラス名が、minSizeValとmaxSizeValにはそれぞれ葉っぱの最小・最大サイズの数値が入ります。
関数の中身は、以下の処理をしています。
- 葉っぱの要素を作成しクラスを付ける
- 葉っぱの最小・最大サイズの間からランダムなサイズを指定する
- 葉っぱのX軸方向の発生位置をランダム指定する
- 完成した葉っぱの要素をコンテナに追加する
- 一定時間が経てば葉っぱを消す
以下で順に解説していきますね。
①葉っぱの要素を作成しクラスを付ける
const leafEl = document.createElement('span');
leafEl.className = `leaf ${leafClass}`;まず葉っぱの要素にはspanタグを使用したいので、createElementでタグを作成します。
このタグにleafと、引数leafClassに渡したクラスを設定します。
<span class="leaf leaf-1"></span>HTMLではこのようになりますね。
②葉っぱの最小・最大サイズの間からランダムなサイズを指定する
const minSize = minSizeVal;
const maxSize = maxSizeVal;
const size = Math.random() * (maxSize + 1 - minSize) + minSize;
leafEl.style.width = `${size}px`;
leafEl.style.height = `${size}px`;ここでは、引数として渡した最小・最大サイズの範囲内でランダムな数値を取得し、葉っぱの横幅・縦幅に設定する処理をしています。
<span class="leaf leaf-1" style="width: 18px; height: 18px;"></span>HTMLでは、このような表示になります。
③葉っぱのX軸方向の発生位置をランダム指定する
leafEl.style.left = Math.random() * 100 + '%';ここでは、葉っぱのX軸方向の発生位置を指定します。
leftプロパティに0~100%までのランダムな数値を設定することで、様々な場所から葉っぱが生成されるようになります。
<span class="leaf leaf-1" style="width: 18px; height: 18px;" left="36%"></span>このように、leftプロパティが追加されましたね。
④完成した葉っぱの要素をコンテナに追加する
container.appendChild(leafEl);完成した葉っぱの要素を、appendChildでコンテナに追加することで、葉っぱの生成が完了です！
⑤一定時間が経てば葉っぱを消す
setTimeout(() => {
leafEl.remove();
}, 8000);アニメーションが終わったら葉っぱは見えなくなるので、削除してしまいましょう。
ここでは、8秒後に葉っぱを削除するという指示をしています。
この時間は、CSSで設定したアニメーションの実行時間に合わせて調整してください。
.leaf {
animation: animate-leaf 8s linear;
}DEMOではアニメーションを8秒に設定してあるので、8秒後に削除しています。
これでcreateLeaf関数は完成です！
25~27行目：葉っぱのクラス名、最小・最大サイズ、生成間隔を指定する
setInterval(createLeaf.bind(this, 'leaf-1', 30, 50), 1000);
setInterval(createLeaf.bind(this, 'leaf-2', 30, 50), 1000);
setInterval(createLeaf.bind(this, 'leaf-3', 30, 50), 1000);完成したcreateLeaf関数を、setIntervalを使って一定間隔で呼び出します。
今回は3種類の葉っぱがあるので、3回記述しています。
まずはcreateLeafに3つの引数を渡しましょう。
- 引数1: 葉っぱのクラス名
- 引数2: 葉っぱの最小サイズ
- 引数3: 葉っぱの最大サイズ
これらの3つを渡せるようにしています。
setIntervalの第2引数には、葉っぱを生成する間隔をミリ秒単位で指定します。
1000は1000ミリ秒 = 1秒なので、1秒ごとに葉っぱを生成するという処理をしています。
この数値を調整することで葉っぱの数を調整できるので、お好みの数値をいれてください。
これでJavaScriptの解説は終わりです！
【まとめ】CSSとJSで落ち葉を舞わせるエフェクトの実装方法
以上、CSSとJavaScriptで落ち葉を舞わせるエフェクトの実装方法を紹介しました。
秋がテーマのサイトなどに使うと、ユーザーの興味をひくことができそうですね。
葉っぱの部分を別の画像に変えることでいろんなアニメーションが作れると思うので、ぜひ活用してみてください！
桜を降らせるエフェクトも作ってみましたので、よければどうぞ。
コメント