kzms2 – html,css,javascript

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

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

詳細は続きから

対応ブラウザ

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の利点に関しては時間を多く取れる時に書きたいと思います！