雪 – インクループ株式会社｜神奈川県相模原市 ホームページ制作、WEBマーケティング https://incloop.com インクループ株式会社は、お客様の顧客獲得をマーケティングを活用して支援する会社です。 データ分析、市場調査に基づく企画立案、コンテンツ制作、運用を通じてお客様の目標を実現します。 Thu, 19 Nov 2020 00:59:16 +0000 ja hourly 1 https://wordpress.org/?v=4.9.19 ほぼコピペするだけ！jQueryでWebページに雪（または花びらなどの画像）を降らせる方法 https://incloop.com/jquery%e3%81%a7%e9%9b%aa%e3%81%be%e3%81%9f%e3%81%af%e8%8a%b1%e3%81%b3%e3%82%89%e3%81%aa%e3%81%a9%e3%81%ae%e7%94%bb%e5%83%8f%e3%82%92%e9%99%8d%e3%82%89%e3%81%9b%e3%82%8b%e6%96%b9%e6%b3%95/ https://incloop.com/jquery%e3%81%a7%e9%9b%aa%e3%81%be%e3%81%9f%e3%81%af%e8%8a%b1%e3%81%b3%e3%82%89%e3%81%aa%e3%81%a9%e3%81%ae%e7%94%bb%e5%83%8f%e3%82%92%e9%99%8d%e3%82%89%e3%81%9b%e3%82%8b%e6%96%b9%e6%b3%95/#respond Mon, 26 Dec 2016 06:31:45 +0000 https://incloop.com/?p=9976 jQueryで雪を降らせる方法

テレビを見なくなってから季節感を失いました、網干です。 情報源がネットの情報になってから早数年…、情報の選別の […]]]> jQueryで雪を降らせる方法

テレビを見なくなってから季節感を失いました、網干です。

情報源がネットの情報になってから早数年…、情報の選別の仕方が極端になってしまったので季節ごとの何かを感じることが少なくなってしまいました…。
そんなこんなで年末になってしまったので、年始の準備が全く整っていません。
と、とりあえず部屋の大掃除を始めて年末感を出そうかなと考えています。

さて、今回は「ほぼコピペするだけ！jQueryでWebページに雪（または花びらなどの画像）を降らせる方法」を記載します。
本記事を読む事で、今見ているページのようにオブジェクト（花びら等）がゆらゆらと落下するエフェクトをページに追加することができます。
（このページでは雪は見づらいので花びらを落下させています）

いろいろな個人サイトを眺めているとたまに見かけるこの機能、意外と簡単に実装できるので紹介します。

雪を降らせるためのプログラムファイルをダウンロード

まず初めに、雪を降らせるためのプログラムファイルをダウンロードします。
ダウンロードは下記のURLから行ってください。
https://github.com/loktar00/JQuery-Snowfall

以下、ダウンロードの方法を記載します。

プログラムのダウンロード方法

URLにアクセスすると下図のようなページに移動します。
ページの右側にある「Clone or download」をクリックしてください。
プログラムファイルのダウンロード

「Clone or download」をクリックすると下図のような画面が表示されますので、右側の「Download ZIP」をクリックしてください。
プログラムファイルをzip形式でダウンロード

「Download ZIP」をクリックするとダウンロードが開始します。
ダウンロードしたファイルはzip形式で圧縮されています。

プログラムファイルのダウンロードは以上になります。

プログラムを使って好きなページに雪を降らせる

先程ダウンロードしたプログラムファイルを解凍して、解凍したフォルダごとサーバー内のアクセスできる領域に設置してください。

これで準備は完了です。早速使ってみましょう！

プログラムの実装

本プログラムはjQueryを使用しているので、headタグに下記の指定が必要になります。

<script src="https://code.jquery.com/jquery-2.2.4.min.js"<</script<

次に、ダウンロードしたプログラムを使うために、下記の記述をbody内に記述します。

<script type="text/javascript" src="(ファイルを格納したディレクトリパス)/JQuery-Snowfall-master/dist/snowfall.jquery.min.js"></script>
<script type="text/javascript">
  jQuery(document).snowfall({
    flakeCount : 100,			// 要素の数
    flakeColor : '#FFF',		// 要素の色
    flakeIndex : 999999,		// 要素のz-index
    minSize : 5,				// 要素の最小サイズ
    maxSize : 20,				// 要素の最大サイズ
    minSpeed : 2,				// 要素の最小落下スピード
    maxSpeed : 5,				// 要素の最大落下スピード
    round : true,				// 要素に丸みを持たせる？
    shadow : false				// 要素に影をつける？
    //collection : 'div'		// 要素を指定の要素に積もらせる設定(画像を設定してもflakeColorで指定した要素の色が積もります)
    //image : './image.png'		// 要素を指定の画像に変更
  });
</script>

これで、ページ内に雪を降らせることができます！

………。

ちょいと分かりにくいかもしれないですね…

ということで、サンプルプログラムを載せておきます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="Shift_JIS">
    <title>snow_sample</title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  </head>
  <body bgcolor="#2d2f52" text="#ffffff">
    <script type="text/javascript" src="./JQuery-Snowfall-master/dist/snowfall.jquery.min.js"></script>
    <script type="text/javascript">
      jQuery(document).snowfall({
        flakeCount : 100,			// 要素の数
        flakeColor : '#FFF',		// 要素の色
        flakeIndex : 999999,		// 要素のz-index
        minSize : 5,				// 要素の最小サイズ
        maxSize : 20,				// 要素の最大サイズ
        minSpeed : 2,				// 要素の最小落下スピード
        maxSpeed : 5,				// 要素の最大落下スピード
        round : true,				// 要素に丸みを持たせる？
        shadow : false				// 要素に影をつける？
        //collection : 'div'		// 要素を指定の要素に積もらせる設定(画像を設定してもflakeColorで指定した要素の色が積もります)
        //image : './image.png'		// 要素を指定の画像に変更
      });
    </script>
  </body>
</html>

※snowfall.jquery.min.js のパスはサーバー内に格納したディレクトリになりますので注意してください！

上記のプログラムが正常に起動すると、雪の降るページが表示されます。

雪ではなく花びらを降らせるための設定方法

雪を花びらに変えたい場合は、下記のようにimageの部分に花の画像を指定することで実装できます。

<script type="text/javascript" src="(ファイルを格納したディレクトリパス)/JQuery-Snowfall-master/dist/snowfall.jquery.min.js"></script>
<script type="text/javascript">
  jQuery(document).snowfall({
    flakeCount : 100,			// 要素の数
    flakeColor : '#FFF',		// 要素の色
    flakeIndex : 999999,		// 要素のz-index
    minSize : 5,				// 要素の最小サイズ
    maxSize : 20,				// 要素の最大サイズ
    minSpeed : 2,				// 要素の最小落下スピード
    maxSpeed : 5,				// 要素の最大落下スピード
    round : true,				// 要素に丸みを持たせる？
    shadow : false,				// 要素に影をつける？
    //collection : 'div'		// 要素を指定の要素に積もらせる設定(画像を設定してもflakeColorで指定した要素の色が積もります)
    image : '(画像ファイルを格納したディレクトリパス)/example.png'		// 要素を指定の画像に変更
  });
</script>

今回は以上になります。

 

いかがでしたか？

企業様のサイトではなかなかできないことですが、個人のサイトではこういった遊びのエフェクトを追加することで面白いページが作れそうですね。

ではまた！


この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

]]> https://incloop.com/jquery%e3%81%a7%e9%9b%aa%e3%81%be%e3%81%9f%e3%81%af%e8%8a%b1%e3%81%b3%e3%82%89%e3%81%aa%e3%81%a9%e3%81%ae%e7%94%bb%e5%83%8f%e3%82%92%e9%99%8d%e3%82%89%e3%81%9b%e3%82%8b%e6%96%b9%e6%b3%95/feed/ 0