こんにちは!
コロナとの決別が待ち遠しい今日この頃ですが、皆さんいかがお過ごしでしょうか。
三寒四温で、暖かったり寒かったりですね。
体調管理にはどうぞ十分にご留意を!
さて、Themify研究所を作り始めてから2ヶ月経ち、デザインを変えてみました。
2020年の暮れ(12月22日)から、地の時代から風の時代に変わって、色々なことがスイスイと軽やかに進んでいる!!とちょこちょこと聞くようになりました。
リモートワークが増え、ネットサーフィンをする目の肥えた方が増えている昨今、遊び心のあるサイトが目立ってくると思われます。
きっと桜の花びらが舞うだけで、滞在期間も長くなるかなと予想しています。
今回ご紹介したいのが、<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> <!-- ここにコンテンツを入れる --> </div> <script src="sakura.js"></script><!-- JS読み込み --> </body> </html>
2.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); } }
3.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); });
サンプルページ
いかがでしょうか?
専門知識の理解が少し必要にはなってきますが、基本的には、上記3つのファイルを間違えずにコピペすれば、桜の花びらを降らせることが可能です。
やってもできなかったよ~という方は、<wev/dev>さんの記事を最後まで読むところから始めて頂ければと思います。
最後までお読みくださりありがとうございました。