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

jQueryのSnowfall Pluginで、複数の画像を利用できるようにしてみました。

jQueryのSnowfall Pluginで、複数の画像を利用できるようにしてみました。

この記事へのコメント

色々なパターンのデモを作成、説明してくださり、とても参考になります。
お尋ねしたいことがあるのですが、例えば背景全体に雪を降らした場合、コンテンツ部分にも雪がかぶさってくると思いますが、コンテンツの上にはかぶらず、背景(画面全体の背景)と同じ階層で降らせることはできるのでしょうか。
z-indexで指定すれば良いのかと思いましたが、よくわかりませんでした。
よろしければ教えていただきたいと思います。
どうぞよろしくお願いいたします。
お名前 : しろ
2013/05/02(木)18:56:51
しろさま>

初めまして。
そして、ご連絡が遅くなり申し訳ございません。

表示される要素の位置についてですが、おっしゃる通りz-indexで指定可能です。
ちょっとデモを作ってみましたので、ご覧になって頂ければ幸いです。

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

HTMLのソースを色々いじって頂ければとおもいます。
スペード、ハート、ダイヤ、クラブの画像を色々な位置に置いてみました。
ポイントは、「flakeIndex」の値を小さくし、上に置きたい要素のz-indexの値をそれより大きくすることです。

ご参考になれば幸いです。
お名前 : ういすぷ
2013/05/03(金)18:14:16
URL
ご回答いただきまして、ありがとうございます。
こちらこそお答えいただきながら、お返事が遅くなり申し訳ないです。

flakeIndexの値を小さくして、試してみましたところ、デモのように、上に置きたいコンテンツを上部に置くことができました!
とてもわかりやすくお答えいただきまして、どうもありがとうございます。
今後も色々と参考にさせていただきますので、よろしくお願いいたします。
お名前 : しろ
2013/05/07(火)10:17:14
こんにちは。こちらのサイトがとても分かりやすく解説されていたので、個人サイトの桜のアニメーションの参考にさせていただきました。ありがとうございます。
そこでひとつ問題があるのですが、画像を読み込むと、なぜか透過PNGが透過されずに表示されてしまいます。これの対処法は何かあるのでしょうか…?
ちなみにIE10です。
お名前 : のえる
2013/08/17(土)08:53:24
のえるさま>
こんにちは。ういすぷです。


ご質問の件ですが、IE10をご利用していて透過PNGが表示出来ないとのことですが、IE10は、透過PNGに対応しておりますので、ブラウザの問題ではなく画像ファイルの問題かとおもいます。
また、ここで配布しています、上記の画像が透過されて表示されているかチェックして頂ければ幸いです。

一つ気になるのが「桜のアニメーション」というところですが、GIF画像によるアニメーションでしょうか。GIFの場合は、256色までと制限されているため、減色処理が必要となります。PNGからGIFへ変換すると、背景が透過されない場合がございます。
また、PNG形式によるアニメーションもありますが、対応しているブラウザは、FirefoxやOperaなどの一部となっております。

なお、IE8以下の場合は、ブラウザに透過PNGのバグがございます。
この場合は、背景が黒やグレーで表示されます。

的外れな答えでしたら申し訳ございません。
表示出来ないとされる画像を見ることができましたらもう少しお答え出来るかもしれません。

ご確認頂ければ幸いです。
お名前 : ういすぷ
2013/08/17(土)10:33:39
URL
ご回答ありがとうございます。
説明がややこしくなってしまいすいません、画像ファイルはgifではなく、pngです。私は普段イラストを描いて慣れているので、そのあたりの処理に不備はないと思われます。

ですが、こちらで配布されている画像で試してみても、同じように透過されませんでした。透過されないというのは、背景の白い部分が表示されてしまうということです。

何か記入ミスがあるのでしょうかね…?
いろいろ調べて見てはいるのですが、直りません…(>_<)

お名前 : のえる
2013/08/17(土)15:47:58
のえるさま>
お返事ありがとうございます。

単純に透過されないということですね。
ところで、以下のURLのページも同じようになるでしょうか。
http://media.tree-web.net/js/demo/number_1951_demo.html

おっしゃる不具合が気になっております。
また、気になる点としてですが、img要素につながるCSSの設定でbackground-color:#ffffff;など、背景色や背景画像の指定をされていないでしょうか。

IEには、Aタグをブロック要素でサイズ指定した際、背景画像がないとリンクされない不具合もあります。

あ、背景要素で気になる点を思いつきました。jQueryの「Snowfall Plugin」は、最新版をご利用されているでしょうか。場合によってはその影響がございます。
こちらを指定してみてください「http://media.tree-web.net/js/demo/jQuery_snowfall_custom_sample-randimg/snowfall.jquery_tw.custom_randimg.js」

指定方法例>
<script type="text/javascript" src="http://media.tree-web.net/js/demo/jQuery_snowfall_custom_sample-randimg/snowfall.jquery_tw.custom_randimg.js"></script>


最新版と思われる「jQuery Snowfall 1.5 」を確認したところ、色指定を見つけました。
オプション要素は、「flakeColor : '#ffffff', // string」です。ここで色指定がありますので、「flakeColor : 'transparent',」となるよう、「transparent」と指定してみて下さい。
これで状況が変わるかと思います。


ご確認頂ければ幸いです。
お名前 : ういすぷ
2013/08/17(土)16:20:11
URL
とてもご丁寧に、どうもありがとうございます。
色指定を「transparent」にしたところ、無事透過して表示させることが出来ました! 
お騒がせしてしまってすいません;

私はまだまだscriptに関して理解できてない部分があるようなので、時間のある時にいろいろと試してみようと思います。奥が深いですね!でもだからこそ楽しい。

今回は本当にありがとうございました!!
これからも参考にさせていただきたいと思います。よろしくお願い致します!
お名前 : のえる
2013/08/17(土)16:44:58
のえるさま>

お返事ありがとうございます。

無事解決出来てよかったです。

ちょっとした問題に当たっても、それを解決出来たときの気分はいい物です。
それのお手伝いが出来たときも同様です。

私も色々勉強になりました。

今後ともよろしくお願いいたします。
お名前 : ういすぷ
2013/08/17(土)17:12:46
URL

コメント投稿フォーム