jQueryとSnowfall Pluginをつかって、桜吹雪にしてみました。 CSS3対応版
2010.12.10
先日「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='https://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="https://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="https://media.tree-web.net/js/snowfall/tw.custom-snow.js"></script>
※ リダイレクト処理が自動的に行われます。
そろそろCSS3も覚えた方がいいかな。でも、仕様すべてが確定している分けじゃないし、IEも9からだもんなぁ。
※ 2019/01/22 … 全ページSSL（HTTPS）に切り替えた際に、正しく動作しない不具合を修正しました。http:〜 を https:〜へ変更しました。
この記事へのコメント
光蟹
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ソースなどが多くてわかりにくいかと思いますが、ご確認頂ければ幸いです。
よろしくお願いいたします。
お問合せありがとうございます。
ご指摘されているスクロールバーに関してですが、ドキュメント全体(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>
上記のように記述しましたが、
桜が降ってきてくれません・・・。
何か別の部分が間違っているのでしょうか？
ご迷惑をおかけしますが、よろしくお願いいたします。
一度試して・・・
というかそのまま<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
すみません。設置場所間違えておりました。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
ご確認頂ければ幸いです。
http://wispblog.tree-web.net/data/1/page_1_2089.html
2013/03/06(水)18:37:52
光蟹
お返事が遅れましたが、
無事桜を降らせることができました。
何度もお答えいただきありがとうございました。
無事桜を降らせることができました。
何度もお答えいただきありがとうございました。
2013/03/13(水)13:58:56
コメント投稿フォーム
フィギュア
最近
カテゴリ
カプセルトイ
初音ミク
アーカイブ
PICUP
きれいなJSでしたので、活用させていただいております。
そこで一つ質問なのですが、
ページ全体に降らせるとたまに左右のスクロールバーが出現してしまいます。
桜が画面の範囲を超えて降ってしまうことが原因だと思いのですが、
よろしければ対応の方法を教えてくださると助かります。