ういすぷのチラシの裏的なブログです。
カプセルトイ、ねんどろいど、写真などがメインとなっています。たまにWebサービスを公開しています。

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

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

この記事へのコメント

はじめまして、光蟹と申します。
きれいな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
URL
早速のご回答ありがとうございます。

一度試して・・・
というかそのまま<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
URL
こちらの記事の方が、色々カスタマイズ出来るかと思います。

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

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

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

コメント投稿フォーム