長期サイト運用はエックスサーバー チェックする

春風に舞う桜の花びらを表現しよう【コピペOKのソース有】


こんにちは!

コロナとの決別が待ち遠しい今日この頃ですが、皆さんいかがお過ごしでしょうか。

三寒四温で、暖かったり寒かったりですね。

体調管理にはどうぞ十分にご留意を!

さて、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>さんの記事を最後まで読むところから始めて頂ければと思います。

最後までお読みくださりありがとうございました。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

フリーランスのWebDeveloper | フロントエンドエンジニア、元グラフィックデザイナーです。

目次