SQLの窓 イラストAC フリー素材

2014年07月12日

jQuery ページアニメーション : 斜めページ / ジョークブックマークレット


▼ ブックマークレット登録用リンクです。
斜めページ


どのような効果がでるかのサンプルブックマークレットです。

1) skew で並行四辺形にして、
2) 回転して縦に表示して
3) 幅を縮小してページにおさまるように
4) 影を付けて見やすく

このうち、1) と 2) と 3) はいずれも transform なので、同時に設定する必要があるので、注意が必要です。1) と 2) は同じ増分で目的を達成できるのですが、3) は、全く違うので、式((100-now)/100)を作って調整しています。

また、処理の中心(transformOrigin)を最初に変更して、ページの左上がページの先頭に一致するようにしています。
str="";
str+="<"+"script> \n";
str+="if ( window.addEventListener ) { \n";
str+="	window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js'; \n";
str+="} \n";
str+="else { \n";
str+="	window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'; \n";
str+="} \n";
str+="document.write(\"<\"+\"script src=\\\"\" + window[window.location.hostname+'.loadjQuery'] + \"\\\"></\"+\"script>\"); \n";
str+="</"+"script> \n";
document.write(str);
function joke_start() {
	$({kakudo: 0,shadow: 0}).animate(
		{kakudo: 45,shadow: 40},
		{
			duration: 3000,
			easing: "swing",
			step: function(now,tween) {
				if ( tween.prop == 'kakudo' ) {
					$(parent.document.body).css({
						transform: 'skew(' + now + 'deg) rotate(' + now + 'deg) scaleX(' + (100-now)/100 + ')'
					});
				}
				if ( tween.prop == 'shadow' ) {
					$(parent.document.body).css({
						boxShadow: now + 'px '+ now +'px '+ now + 'px '+ now + 'px rgba(0, 0, 0, 0.5)'
					})
				}
			}
		}
	);
}
str="";
str+="<"+"script> \n";
str+="joke_start(); \n";
str+="$(parent.document.body).css({ transformOrigin: '50% 850px' }); \n";
str+=" ";
str+="</"+"script> \n";
document.write(str);
document.close();

関連する記事

ジョークブックマークレット : ページの回転 ( jQuery アニメーション )


タグ:javascript jquery
posted by at 2014-07-12 14:54 | ブックマークレット | このブログの読者になる | 更新情報をチェックする