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

jQueryとSnowfall Pluginで桜をちらせてみました。

jQueryとSnowfall Pluginで桜をちらせてみました。

この記事へのコメント

CSS3対応ブラウザなら
var angle = Math.round(Math.random()*360);
flakeMarkup += "-moz-transform:rotate(" + angle + "deg);";
flakeMarkup += "-webkit-transform:rotate(" + angle + "deg);";
flakeMarkup += "transform:rotate(" + angle + "deg);";
ってな感じで、回転させてやるといいですね。
お名前 : かぷらん
2010/12/10(金)14:40:31
>かぷらんさん初めまして。

貴重な情報ありがとうございます。
早速利用させていただきました。

桜吹雪改良版:
http://media.tree-web.net/js/demo/jQuery_snowfall_custom_sample-0.02/

画像を雪の結晶に変えてみました。
http://media.tree-web.net/js/demo/jQuery_snowfall_custom_sample-snowflakes/
お名前 : ういすぷ
2010/12/10(金)20:58:42
URL
もうかなり書かれてから期間が過ぎていますが・・・
別のところでこれを知り、色々と調べてここにたどり着きました。
そして最初に私がこれを適用させたときに思いました。
「なんか動作がおかしい」
で画面を小さくしてみたら、違和感の正体が分かりました。
サンプルページのウィンドウを小さくしてみてください。
・・・これ解決できないかしら。
お名前 : ゆの
2013/09/23(月)19:12:49
忘れてました(´・ω・`)
こんな感じで作ってますので放り投げておきますね。
https://www.sugarsync.com/pf/D7261924_74906101_647986
お名前 : ゆの
2013/09/23(月)19:37:39
ゆの さま>
はじめまして、ういすぷです。

おっしゃっているのは、スクロールバーが表示されたり消えたりするところでしょうか。
これは、$(document).snowfall( 〜と指定しているためです。
この部分を、CLASSやIDで指定して範囲外にでたらOverflow="hidden"と指定してあげると違和感が無くなるのかなと思います。

ご連絡がありましたURLのサンプルであれば、
$(".ttl").snowfall( 〜とCLASSを指定してあげたら狙った動作をするのではと思います。
お試しくださいませ。
IDの場所に指定する場合は、$("#ID名").snowfall(〜
タグそのものに指定する場合は、$("タグ名").snowfall(〜
となります。
また、表示させたいIDやタグの後に、JavaScriptのソースを挿入してください。

サンプルも不足部分があって申し訳ございません。
更新しましたので、ご確認頂ければ幸いです。
お名前 : ういすぷ
2013/09/23(月)20:31:17
URL
ういすぷ様

ご指摘いただいた内容で作業を行ったところ、
無事解決に至りましたのでご報告いたします。
ちなみに記述した内容は、
HTML
<script type="text/javascript">
$("body").snowfall({

CSS
body
{
background: black;
overflow: hidden;
height: 600px;
}

で解決いたしました。
お手数おかけいたしました。
お名前 : ゆの
2013/09/24(火)01:57:11
ゆの さま>
無事解決出来てほっとしております。
また、ご連絡ありがとうございました。

私も勉強出来てよかったです。
また機会がありましたらよろしくお願いいたします。
お名前 : ういすぷ
2013/09/24(火)09:51:06
URL

コメント投稿フォーム