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:〜へ変更しました。
きれいなJSでしたので、活用させていただいております。
そこで一つ質問なのですが、
ページ全体に降らせるとたまに左右のスクロールバーが出現してしまいます。
桜が画面の範囲を超えて降ってしまうことが原因だと思いのですが、
よろしければ対応の方法を教えてくださると助かります。