先日、庭に雪の結晶を作ったブログの記事を拝見したので、早速ブログに載せてみましたが、言うまでもなくとても綺麗です。しかし、しばらく見てみると、そのページが特に引っかかっていることに気づきました。
コードを見てみると、オリジナルの作者は複数の小さな div の雪の結晶をボディに挿入し続け、ゆっくりと下に向かって浮かせた後、雪の結晶を削除していました。
でも、実際には画面の向こうにページは見えないので、雪の結晶が浮かんでいても意味はありません。
そこで、元のコードを少し変更して、(本体の下部ではなく) 画面の上部から画面の下部にのみ落ちるようにし、雪の結晶を削除して、雪の結晶の位置を固定に変更しました。
ページを更新したところ、さらに良くなりました。次に、変更したコードを投稿してみんなと共有します。
追記: オリジナルの作者へのリンクが見つかりませんでした。著作権はオリジナルの作者に帰属します:)
(function($){
$.fn.snow=function(options){
var $flake=$('< div />')
.css ({
'position':'fixed',//'absolute',
'top':'-50px',
'z-index' :'1000'
})
.html('❄');
var documentHeight=document.documentElement.clientHeight;//$(document).height(); (ドキュメント).width();
var デフォルト={minSize:10,maxSize:20,newOn:500,flakeColor:"#FFFFFF"};
var options=$.extend({},defaults,オプション);
var interval=setInterval( function(){
var startPositionLeft=Math.random()*documentWidth-100;
var startOpacity=0.5 Math.random();
var sizeFlake= options.minSize Math.random()*options.maxSize;
var endPositionTop=startPositionLeft-100 Math.random()*200; .random()*5000;
$ flake.clone()
.appendTo('body')
.css({
left:startPositionLeft,
opacity:startOpacity,
'font-size':sizeFlake,
color:options.flakeColor
})
.animate({
top:endPositionTop,
left:endPositionLeft,
opacity:0.2 },
durationFall,
'linear',
function(){
$(this).remove();
}); //interval End
};// $.fn.snow End
})(jQuery);
$.fn.snow({ minSize: 10, maxSize: 60, newOn: 800, flakeColor: '#ccc'});