jQueryとSnowfall Pluginをつかって、桜吹雪にしてみました。 CSS3対応版

jQueryとSnowfall Pluginをつかって、桜吹雪にしてみました。 CSS3対応版
先日「jQueryとSnowfall Pluginで桜をちらせてみました。」ページで紹介しました、JavaScriptライブラリとプラグインを利用した桜吹雪ですが、ブログコメントにCSS3を利用して、回転をかけることができるソースを紹介していただいたので、改良を加えてみました。

※ CSS3を利用していますので、対応ブラウザ(Firefox3.6.12で確認)が必要となります。無くても動作しますが、CSS3の効果は反映されません。



■ 必要なもの
jQuery
Snowfall Plugin
・吹雪に使う画像



■ ソースのカスタマイズ
snowfall.jquery.jsをテキストエディタなどで開き、「var flakeMarkup = 〜」の部分をカスタマイズします。
var angle = Math.round(Math.random()*360);
var flakeMarkup = "<img src='http://lib.tree-web.net/image/snowflakes1.png' id='flake-" + this.id;
flakeMarkup += "' style='width: " + this.size + "px; height: " + this.size + "px;";
flakeMarkup += "; position: absolute; top: " + this.y + "px; left:" + this.x +
"px; font-size: 0px; z-index: " + options.flakeIndex;

flakeMarkup += "; -moz-transform:rotate(" + angle + "deg);";
flakeMarkup += "-webkit-transform:rotate(" + angle + "deg);";
flakeMarkup += "transform:rotate(" + angle + "deg);";
flakeMarkup += "' />";




■ Download
画像は、32bit PNG形式になっています。
1)桜の花びらこちらから、桜の花びらもダウンロードできます。
2)桜の花びらこちらは、雪の結晶です。



■ DEMO
桜吹雪のデモ
桜吹雪のデモ(CSS3対応版)
雪の結晶のデモ(CSS3対応版)



■ おまけ
なんか、色々面倒!
そんなときは、以下のソースを貼り付けると、雪の結晶が舞い散ります。ただし、jQuery、Snowfall Pluginも内部でロードしていますので、事前にロードしている場合はご注意ください。
<script type="text/javascript" src="http://media.tree-web.net/js/demo/jQuery_snowfall_custom_sample-snowflakes/start.js"></script>


ソースが長すぎる!
そんな時は、以下のソースをご利用ください。
<script type="text/javascript" src="http://bit.ly/h1dwWD"></script>


Snowfall PlugiをカスタマイズしたJSだけアクセスしたい場合はこちらをご利用ください。
<script type="text/javascript" src="http://media.tree-web.net/js/snowfall/tw.custom-snow.js"></script>

※ リダイレクト処理が自動的に行われます。

そろそろCSS3も覚えた方がいいかな。でも、仕様すべてが確定している分けじゃないし、IEも9からだもんなぁ。

2010.12.10

この記事へのコメント

光蟹
はじめまして、光蟹と申します。
きれいなJSでしたので、活用させていただいております。

そこで一つ質問なのですが、
ページ全体に降らせるとたまに左右のスクロールバーが出現してしまいます。
桜が画面の範囲を超えて降ってしまうことが原因だと思いのですが、
よろしければ対応の方法を教えてくださると助かります。
2013/03/05(火)16:05:21
ういすぷ
光蟹 さまこんにちは。

お問合せありがとうございます。
ご指摘されているスクロールバーに関してですが、ドキュメント全体(HTML全体)を指定しているため、お困りの現象が発生いたします。

そこで、ご案内しているURL内のソース
http://bit.ly/h1dwWD または、
http://media.tree-web.net/js/demo/jQuery_snowfall_custom_sample-snowflakes/start.js

をダウンロードして頂き、以下のソースを書き換え、HTML上に貼り付けて下さい。

4行目の「$(document).」の部分を、表示させたい箇所のスタイルシートの名前に変更します。
元>
document.write( '$(document).snowfall({ flakeCount :100, flakeIndex : 99999, maxSpeed : 5, minSpeed : 1, maxSize : 20, minSize : 1, image :"http://lib.tree-web.net/image/snowflakes1.png"});' );

変更例 (id="sakurafubuki" のところを表示させる設定)>
document.write( '$("#sakurafubuki").snowfall({ flakeCount :100, flakeIndex : 99999, maxSpeed : 5, minSpeed : 1, maxSize : 20, minSize : 1, image :"http://lib.tree-web.net/image/snowflakes1.png"});' );


HTMLコピー例>
※ 出来るだけHTMLのソース内上位に設置します。
<script type="text/javascript">
document.write( '<scr'+'ipt type="text/javascript" src="http://lib.tree-web.net/js/jquery/jquery-1.4.min.js"></scr'+'ipt>' );
document.write( '<scr'+'ipt type="text/javascript" src="http://media.tree-web.net/js/demo/jQuery_snowfall_custom_sample-snowflakes/snowfall.jquery_tw.custom.js"></scr'+'ipt>' );
document.write( '<scr'+'ipt type="text/javascript">' );
document.write( '$("#sakurafubuki").snowfall({ flakeCount :100, flakeIndex : 99999, maxSpeed : 5, minSpeed : 1, maxSize : 20, minSize : 1, image :"http://lib.tree-web.net/image/snowflakes1.png"});' );
document.write( '</scr'+'ipt>' );
</script>


HTMLソースなどが多くてわかりにくいかと思いますが、ご確認頂ければ幸いです。
よろしくお願いいたします。
2013/03/05(火)17:48:06
光蟹
早速のご回答ありがとうございます。

一度試して・・・
というかそのまま<head>内にコピペして、
<head>

ういすぷ様のソース

</head>
<body>

<div id="sakurafubuki">

<img src="sakurapage.jpg" alt="桜特集ページ" />

</div>

上記のように記述しましたが、
桜が降ってきてくれません・・・。

何か別の部分が間違っているのでしょうか?
ご迷惑をおかけしますが、よろしくお願いいたします。
2013/03/06(水)09:42:22
ういすぷ
光蟹さま>
すみません。設置場所間違えておりました。HTMLの出来るだけ下の方に設置してください。(HTMLの読み込みタイミングによる影響が出るためです。)


デモページを用意してみました。
HTMLのソースを参考にして頂ければ幸いです。
表示表示される部分は、分かりやすいように背景を黒くしています。
また、吹雪の画像は変更できますので、色々お試し頂ければ幸いです。

http://media.tree-web.net/js/demo/number_1614_demo.html


また、記事にあるDEMOページのソースを利用する方法もあります。
関連記事は、以下のURLとなります。
http://wispblog.tree-web.net/tag.cgi?p=1&tag=Snowfall+Plugin
2013/03/06(水)18:25:14
ういすぷ
こちらの記事の方が、色々カスタマイズ出来るかと思います。

ご確認頂ければ幸いです。
http://wispblog.tree-web.net/data/1/page_1_2089.html
2013/03/06(水)18:37:52
光蟹
お返事が遅れましたが、
無事桜を降らせることができました。

何度もお答えいただきありがとうございました。
2013/03/13(水)13:58:56
ういすぷ
光蟹さま>

無事設置できてなによりです。
また、ご連絡ありがとうございます。
2013/03/13(水)16:22:32

コメント投稿フォーム