メリークリスマス！

というわけでむか～し見たことがあるような、雪が降るエフェクトをCSS3でやってみました。

こんな感じに雪が降り出します。
※Chrome4、Safari4↑では表示確認済みですが、Chromeの方がお勧めです。

詳細とブックマークレットは続きから。

ブックマークレット

1. snow effect[kzms2]←をお気に入り登録（ブックマーク）します。
2. 雪を降らせたいページでクリックします

以上です。

ちょこっとだけ説明

雪球（？）の作り方

●っぽい物が上から降ってくると思いますが、これはborderのみで実装しています。
どういうことかというと…
border-width:5px solid #fff;
-webkit-border-radius:5px;
というように、ボーダーの太さと、角丸の径の大きさをそろえると丸い形になるのでそれを利用しています。

アニメーションの基本設定

遅延させる時間、アニメーションさせる時間、開始位置、などはJavascriptで付与していますが、アニメーション自体はCSS3のみでやっています。

アニメーションの詳細部分

アニメーションの詳細は、基本的には以下のようになっています。
kzms2snow1{
　0%{}
　100%{top:1500px;margin-left:0;}
}

まとめ

1. Javascriptでやるよりは軽いけれども、若干重いかも…
2. というよりこれそもそも誰得？

昔ふるいサイトで、こういうサイトありましたよね！
まあ思いつきでやったネタということで…！

皆様よい聖夜をっ

表題だけだとよくわからないかもですが

こんな感じにページ内の要素がグリングリン回り始めます。

詳細は続きから

対応ブラウザ

Chrome3以上か、Safari4以上

使用方法

1. ページグルグル【kzms2】←をお気に入り登録（ブックマーク）します。
2. グルグルさせたいページでクリックします

以上です。
動きを見るだけならページグルグル【kzms2】をクリックするだけでこのページがグリングリンし始めます。

仕組みの説明

また今度アニメーションの要素については説明しますが、概要っぽく説明しておきます。

css3について

.kzms2{
/*動き方の指定*/
-webkit-animation-timing-function:cubic-bezier;
/*アニメーションの起点を決める*/
-webkit-transform-origin:50% 50%;
/*アニメーションの回数を設定*/
-webkit-animation-iteration-count:1;
/*kzms2rotateというアニメーションの動作をさせる*/
-webkit-animation-name:kzms2rotate;
}
/*kzms2rotateアニメーションの設定
%ごとに動きを決める*/
@-webkit-keyframes kzms2rotate{
0%{
}
12.5%{
/*rotateは回転、scaleは拡大・縮小*/
-webkit-transform:rotate(45deg) scale(0.5);
}
25%{
-webkit-transform:rotate(90deg) scale(1);
}
37.5%{
-webkit-transform:rotate(135deg) scale(0.5);
}
50%{
-webkit-transform:rotate(180deg) scale(1);
}
62.5%{
-webkit-transform:rotate(225deg) scale(0.5);
}
75%{
-webkit-transform:rotate(270deg) scale(1);
}
87.5%{
-webkit-transform:rotate(315deg) scale(0.5);
}
100%{
-webkit-transform:rotate(360deg) scale(1);
}
}

Javascriptについて

Javascriptは言うほど得意ではないのであまり載せたくないのですが。。。
ブックマークレットをクリックすると以下のJavascriptを読み込みます。
流れとしては

1. cssファイルをヘッダーに書き出し
2. body内の全要素を特定
3. body内の全要素それぞれにclass=”kzms2″を追加
4. ランダムな数値でアニメーションの感覚・時間を設定

と言った様な処理をしています。

var kzms2 = {
init:function(){
kzms2.getCSS('http://kzms2.com/lab/css3/bml/dance.css');
kzms2.dance();
},
getCSS:function(url){
var link = document.createElement('link');
with(link){
href = url;
type = 'text/css';
rel = 'stylesheet';
}
var head = document.getElementsByTagName('head');
head.item(0).appendChild(link);
},
dance:function(){
var i=0;
var el = document.getElementsByTagName('body')[0].getElementsByTagName('*');
for(i;i var rand = 500*parseInt(Math.random()*50);
var rand2 = 1500*parseInt(Math.random()*50);
el[i].className = el[i].className+' kzms2';
el[i].style.webkitAnimationDuration = rand+'ms';
el[i].style.webkitAnimationDelay = rand2+'ms';
}
}
}
kzms2.init();

またまたネタっぽいですね＞＜
css3の利点に関しては時間を多く取れる時に書きたいと思います！