jQueryで簡単に桜の花びらを降らせる方法

櫻坂46のデビューカウントダウンライブのサイトで実装されているような、桜を降らせる方法についてまとめました。

jQueryを使って、桜の花びらが舞うエフェクトを実装していきます。

花びらの大きさや向きがランダムなので、自然な動きを再現できます。

jQueryやCSSの記述も少ないので、初心者の方にもおすすめです。

CONTENTS

1.デモページ
2.Git Hub
3.ディレクトリ構成
4.オプション

1.デモページ

▽ デモページ

https://www.yuki-017.com/demo/sakura-js/

2.Git Hub

GitHub

▽ 使用するGitHub ( jQuery-Sakura )

https://github.com/nayleen/jQuery-Sakura

緑色のボタン「Code」→「Download ZIP」からダウンロード。
今回はjquery-sakura.min.jsとjquery-sakura.min.cssを使用しています。

3.ディレクトリ構成

assetsフォルダに「css」と「js」フォルダを作成。
jQueryはCDNを読み込みます。

ー index.html
― assets / css / jquery-sakura.min.css
― assets / css / style.css
― assets / js / jquery-sakura.min.js
― assets / js / script.js

index.html

<head>
  <!-- CSS -->
  <link rel="stylesheet" href="/assets/css/style.css">
  <link type="text/css" rel="stylesheet" media="screen" href="/assets/css/jquery-sakura.min.css" />
</head>

<head>

</head>

<body>

～～～

  <!--- jQuery --->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
  <script src="/assets/js/jquery-sakura.min.js"></script>
  <script src="/assets/js/script.js"></script>
</body>

<body>

～～～

</body>

script.js

script.jsの中に桜を降らせるコードを挿入します。

// domReady
$('body').sakura();

// windowLoad
$(window).on('load', function() {
  $('body').sakura();
});

// domReady

$('body').sakura();

// windowLoad

$(window).on('load', function() {

$('body').sakura();

});

4.オプション

速さや大きさなどのオプションをつけることができます。

// domReady
$('body').sakura('start',{
  fallSpeed: 0.5,
  newOn: 50,
  maxSize: 14,
  minSize: 9
});

// domReady

$('body').sakura('start',{

fallSpeed: 0.5,

newOn: 50,

maxSize: 14,

minSize: 9

});

fallSpeed:　桜の落ちるスピード
newOn: 新しい花びらが追加される間隔
maxSize: 花びらの大きさ（最大）
minSize: 花びらの大きさ（最小）

他のオプションについてはGitHubの解説をご覧ください。
https://github.com/nayleen/jQuery-Sakura

HTML+CSS jQuery Javascript アイドル櫻坂46 CSS