こんにちは！
コロナとの決別が待ち遠しい今日この頃ですが、皆さんいかがお過ごしでしょうか。
三寒四温で、暖かったり寒かったりですね。
体調管理にはどうぞ十分にご留意を！
さて、Themify研究所を作り始めてから２ヶ月経ち、デザインを変えてみました。
2020年の暮れ（１２月２２日）から、地の時代から風の時代に変わって、色々なことがスイスイと軽やかに進んでいる！！とちょこちょこと聞くようになりました。
リモートワークが増え、ネットサーフィンをする目の肥えた方が増えている昨今、遊び心のあるサイトが目立ってくると思われます。
きっと桜の花びらが舞うだけで、滞在期間も長くなるかなと予想しています。
今回ご紹介したいのが、<web/dev>さんで紹介されているコピペOKの記事です。
記事に細かく書かれていますが、全部読まなくてもコピペで実装可能です。
既にあるHTMLとCSSにJavaScriptで動きをつけてCSSで桜を作って読み込んでいく方法です。
コピーして貼り付けるだけで、とっても本物っぽい動きをする桜の花びらが、サイト上で優雅に舞います。
著作権も不要なので、気になる方は、ぜひ試してみてください♪
降らせ方
htmlファイルに桜の花びらのイメージをcssファイルとjsでファイルで読み込ませます。
STEP1
ファイルを3ページ作ります。
例）sakura.html / sakura.css / sakura.js
1.sakura.html の記述
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cherry Blossom DEMO</title>
<link rel="stylesheet" href="sakura.css"><!-- CSS読み込み -->
</head>
<body>
<div class="cherry-blossom-container">
<!-- ここにコンテンツを入れる -->
</div>
<script src="sakura.js"></script><!-- JS読み込み -->
</body>
</html>２．sakura.cssの記述
/* 桜を表示するコンテナのスタイル */
.cherry-blossom-container {
position: relative;
height: 100vh; /* コンテナの高さ */
width: 100%; /* コンテナの横幅 */
overflow: hidden; /* コンテナからはみ出した要素を隠す */
}
/* 桜の花びらのスタイル */
.petal {
position: absolute;
background-color: #ffc0cb; /* 花びらの色 */
border-radius: 150% 0 150% 0;
animation: animate-petal 10s linear;
}
.petal::after {
content: "";
position: absolute;
top: -14%;
left: -10%;
display: block;
width: 100%;
height: 100%;
background-color: #ffc0cb;
border-radius: 150% 0 150% 0;
transform: rotate(15deg);
}
/* 花びらが降るアニメーション */
@keyframes animate-petal {
0% {
top: 0;
opacity: 0;
transform: rotate(0deg);
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
top: 100vh;
transform: rotate(3000deg);
}
}３．sakura.js （JavaScript)の記述
window.addEventListener('DOMContentLoaded', () => {
// コンテナを指定
const section = document.querySelector('.cherry-blossom-container');
// 花びらを生成する関数
const createPetal = () => {
const petalEl = document.createElement('span');
petalEl.className = 'petal';
const minSize = 10;
const maxSize = 15;
const size = Math.random() * (maxSize + 1 - minSize) + minSize;
petalEl.style.width = `${size}px`;
petalEl.style.height = `${size}px`;
petalEl.style.left = Math.random() * innerWidth + 'px';
section.appendChild(petalEl);
// 一定時間が経てば花びらを消す
setTimeout(() => {
petalEl.remove();
}, 10000);
}
// 花びらを生成する間隔をミリ秒で指定
setInterval(createPetal, 300);
});いかがでしょうか？
専門知識の理解が少し必要にはなってきますが、基本的には、上記３つのファイルを間違えずにコピペすれば、桜の花びらを降らせることが可能です。
やってもできなかったよ～という方は、<wev/dev>さんの記事を最後まで読むところから始めて頂ければと思います。
最後までお読みくださりありがとうございました。
