秋ですので、楓を散らせてみました。ちょっと重いかも。

秋ですので、楓を散らせてみました。ちょっと重いかも。
秋ですし、楓を散らせてみました。
PCや表示する端末の性能によっては、重いかもしれません。

この処理は、jQueryとSnowfall Pluginをカスタマイズして行っています。カスタマイズ内容は、こちらの「jQueryのSnowfall Pluginで、複数の画像を利用できるようにしてみました。」ページで紹介しています。


■ 設定/オプション
ソースは以下の通りです。
画像のファイルはフルパスで指定でき、いくつでも設定できます。
<script type="text/javascript" src="http://lib.tree-web.net/js/jquery/jquery-1.4.min.js"></script>
<script type="text/javascript" src="https://media.tree-web.net/js/demo/jQuery_snowfall_custom_sample-randimg/snowfall.jquery_tw.custom_randimg.js"></script>
<script type="text/javascript">
$(document).snowfall({
flakeCount :50, // 数
flakeIndex : 99999, // スタイルシートのz-indexの値
maxSpeed : 5, // 最大速度
minSpeed : 1, // 最小速度
maxSize : 20, // 最大サイズ
minSize : 5, // 最小サイズ
image : [
'http://lib.tree-web.net/image/kaede_leaf/kaede_leaf01.png',
'http://lib.tree-web.net/image/kaede_leaf/kaede_leaf02.png',
'http://lib.tree-web.net/image/kaede_leaf/kaede_leaf03.png'
]
});
</script>



■ 楓の画像
背景は透明化させたPNGファイルです。



■ 関連ページ
jQueryのSnowfall Pluginで、複数の画像を利用できるようにしてみました。
jQueryとSnowfall Pluginをつかって、桜吹雪にしてみました。 CSS3対応版
jQueryとSnowfall Pluginで桜をちらせてみました。

2011.11.04

コメント投稿フォーム