記事の詳細

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

プログラムの実装

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

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

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

………。

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

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

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

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

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

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

今回は以上になります。

 

いかがでしたか?

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

ではまた!


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

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

The following two tabs change content below.
網干 裕介

網干 裕介

コーダーの網干裕介(あぼしゆうすけ)と申します。webサイトは見た目が非常に重要なのですが、サイトを構成するソースコードも見た目が重要だと考えています。内も外も魅力的なコンテンツが作れる人物になれるよう、日々努力しています。

ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

AD

ページ上部へ戻る