雪を降らした簡単なCSSアニメーションはないかな?
初心者のために今回はCSSアニメーションで冬にピッタリな雪を降らせてみましょう。
今回の背景はフリーのイラストを使用しているので、お気に入りの背景を使用してオリジナルの作品を作成してください。
HTML、CSS、JavaScriptで実装していきます。
難しく感じましたらエディタにコピペして雰囲気を掴んで後からじっくり書いていくのも良いでしょう。
- 背景画像に雪を降らす実装ができる
- HTML、CSS、JavaScriptの関連がわかる
- コピペでも実装することができる。
ぜひ最後までご覧になって綺麗に雪を降らせてください。
CSSアニメーションとJsを使った実装
それぞれ次の内容でコードを説明していきます。
HTMLとCSSは比較的コードも短いので心配はありません。
JavaScriptは雪を降らすための関数などがありますので少し難しく見えるかもしれ
ませんが、説明していきますので心配なく実装してください。
- HTMLで背景の設定
- CSSで雪のアニメーションの設定
- JavaScriptで雪のサイズと降らせ方の設定
HTML部分のコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SNOW</title>
<link rel="stylesheet" href="style.css"><!-- CSS読み込み -->
</head>
<body>
<div class="snow-container">
<img src="img/snow.jpg">
<span class="snow" style="width: 12px; height: 12px; left: 489px;"></span>
</div>
<script src="main.js"></script><!-- JS読み込み -->
</body>
</html>
HTMLでは背景の設定をします。
class=”snow-containerにimgで画像をおきます。画像名は任意です。
CSS部分のコード
CSSでは背景の設定と雪の降るアニメーションの設定です。
部分で分けて説明します。
/* 背景を表示させるコンテナ */
.snow-container {
position: relative;
overflow: hidden; /* 背景からはみ出した雪を隠す */
}
.snow-container img {
height: 100vh; /*背景の高さ*/
width: 100%; /* 背景の横幅 */
}
/*雪の色とループ*/
.snow {
position: absolute;
background-color: #fff; /*色*/
border-radius: 50%; /*雪を丸*/
animation: animate-snow 20s linear; /*アニメーションでループ*/
}
/* 画面からの降り始めと画面から消える時の設定 */
@keyframes animate-snow {
0% {
top: 0;
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
top: 100vh;
}
}
.snow-container {
position: relative;
overflow: hidden; / 背景からはみ出した雪を隠す /
}
.snow-container img {
height: 100vh; /背景の高さ/
width: 100%; / 背景の横幅 */
}
画像の設定をします。
overflow:hiddenで画面からはみ出た雪を隠します。
heightとwidthで画像のサイズの設定をします。
.snow {
position: absolute;
background-color: #fff; /色/
border-radius: 50%; /雪を丸/
animation: animate-snow 20s linear; /アニメーションでループ/
}
animation: animate-snow 20s linear; はCSSアニメーションで雪が降ってくるスピードとそれループさせる設定をします。
@keyframes animate-snow {
0% {
top: 0;
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
top: 100vh;
}
}
keyframesで画面からの降り始めの雪をopacity: 0;で透過。
途中はopacity: 1;で表示
100%の終わりは再びopacity: 0;で透過して消えるようにします。
JavaScript部分のコード
window.addEventListener('DOMContentLoaded', () => {
// コンテナを指定
const section = document.querySelector('.snow-container');
// 雪を生成する関数
const createSnow = () => {
const snowEl = document.createElement('span');
snowEl.className = 'snow';
const minSize = 5;
const maxSize = 15;
const size = Math.random() * (maxSize + 1 - minSize) + minSize;
snowEl.style.width = `${size}px`;
snowEl.style.height = `${size}px`;
snowEl.style.left = Math.random() * innerWidth + 'px';
section.appendChild(snowEl);
// 一定時間が経てば雪を消す
setTimeout(() => {
snowEl.remove();
}, 20000);
}
// 雪が発生する間隔をミリ秒で指定
setInterval(createSnow, 300);
});
const section = document.querySelector(‘.snow-container’)
HTMLでclassにsnow-containerとつけたものを指定します。
const createSnow = () => {
const snowEl = document.createElement(‘div’);
snowEl.className = ‘snow’;
const minSize = 5;
const maxSize = 15;
const size = Math.random() * (maxSize + 1 – minSize) + minSize;
snowEl.style.width = ${size}px
;
snowEl.style.height = ${size}px
;
snowEl.style.left = Math.random() * innerWidth + ‘px’;
section.appendChild(snowEl);
const minSize = 5;
const maxSize = 15;
const size = Math.random() * (maxSize + 1 – minSize) + minSize;
snowEl.style.width = ${size}px
;
snowEl.style.height = ${size}px
;
雪のサイズをランダムにするため最大値・最小値を5px~15pxの間で生成します。
それからHTMLで設定したwidth・heightで指定したランダムに降らせます。
setTimeout(() => {
snowEl.remove();
}, 20000);
雪が生成されてから20秒後に消す設定です。数字を変えて早く消すこともできます。
setInterval(createSnow, 150);
雪が上から発生する間隔の設定をします。数値を減らすと雪が多くなります。
CSSアニメーションとJavascriptで雪を降らせてみよう まとめ
いかがでしたでしょうか。
今回はコードも短くわかりやすいのではないでしょうか。
難しいと感じられたらコピペして雰囲気をつかんでからコードを書くのも良いかもしれません。
Webサイトを作るときに使用すると豪華になイメージになりますね。
形や色を変えて紙吹雪や桜など応用もできます。
ぜひWebサイト制作の時などお試しください。
自身でもこのようなプログラムを作ってみたい、プログラミングを本格的に学んでみたいときはスクールがおすすめです。
テックアカデミー無料メンター相談HTML/CSSはもちろんJavaScript・PHPなど他にも様々なプログラミング言語を学習できます。
基本からしっかり学べるので初心者の方にもおすすめです。
最短・最速で脱プログラミング初心者|Skill Hacks(スキルハックス)スクールよりのお手頃価格で学習できるので人気のスクールになっています。
動画視聴がメインでサポートもしっかりあり初心者でも安心です。
スクールは独学学習ではつまづきやすいところをカバーしてくれますので、初心者の方でもっと早くできるようになりたいという方はスクールが最速でおすすめです。
ぜひご自身でも様々なプログラムで楽しい動きなどを工夫して、Web制作サイトに取り入れてみてはいかがでしょうか。