jQuery を少し使った keyframes 操作
|
|
日時: 2013/03/07 02:48
名前: lightbox
|
拡張子:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
/*
アニメーションの実体
※ フレームの最初と最後でどういう状態にするか
※ 同じアニメーションなら一つ定義して複数から参照する
*/
@-webkit-keyframes doing-rotate {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes doing-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@-o-keyframes doing-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes doing-rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
doing {
display: none;
border-radius: 50%; /* 元の形状を丸くする為 */
font-size: 18px; /* 位置指定を em でしているので、ここを変更すると半径変更 */
width: 5px; /* サイズ変更 */
height: 5px;
/* em を使うと、font-size にサイズを連動させる事ができる */
/* width: .25em; height: .25em; */
/* box-shadow による影の複数作成 : 位置と色と不透明度を指定 */
box-shadow:
0 -.4em 0 0 rgba(50,0,0,1),
-.28em -.28em 0 0 rgba(50,0,0,.75),
-.4em 0 0 0 rgba(50,0,0,.50),
-.28em .28em 0 0 rgba(50,0,0,.25)
;
}
</style>
<div style='position:relative;width:200px;height:200px;'>
<input type="button" id="start" value="start" />
<input type="button" id="stop" value="stop" />
<input type="button" id="move" value="移動" />
<doing style='position:absolute;left:100px;top:100px;'/>
</div>
<script type="text/javascript">
$.extend({
ani_start: function(name) {
$(name).css("display", "block")
.css("-webkit-animation", ".85s doing-rotate steps(8) infinite")
.css("-moz-animation", ".85s doing-rotate steps(8) infinite")
.css("-o-animation", ".85s doing-rotate steps(8) infinite")
.css("animation", ".85s doing-rotate steps(8) infinite");
return $(name);
},
ani_stop: function(name) {
$(name).css("display", "none")
.css("-webkit-animation-name", "none")
.css("-moz-animation-name", "none")
.css("-o-animation-name", "none")
.css("animation-name", "none");
return $(name);
},
ani_move: function(name,x,y) {
$(name).css("left", x+"px")
.css("top", y+"px");
return $(name);
}
});
$("#start").click( function(){ $.ani_start("doing"); } );
$("#stop").click( function(){ $.ani_stop("doing"); } );
$("#move").click( function(){ $.ani_move("doing",50,50); } );
</script>
|
|
Opera が動く版( IE9 はダメ ) ( No.1 ) |
|
日時: 2013/03/05 11:16
名前: lightbox
|
日時: 2013/03/05 11:16 名前: lightbox
拡張子:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
/*
アニメーションの実体
※ フレームの最初と最後でどういう状態にするか
※ 同じアニメーションなら一つ定義して複数から参照する
*/
@-webkit-keyframes doing-rotate {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes doing-rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
doing {
display: block;
visibility: hidden;
border-radius: 50%; /* 元の形状を丸くする為 */
font-size: 18px; /* 位置指定を em でしているので、ここを変更すると半径変更 */
width: 5px; /* サイズ変更 */
height: 5px;
/* em を使うと、font-size にサイズを連動させる事ができる */
/* width: .25em; height: .25em; */
/* box-shadow による影の複数作成 : 位置と色と不透明度を指定 */
box-shadow:
0 -.4em 0 0 rgba(50,0,0,1),
-.28em -.28em 0 0 rgba(50,0,0,.75),
-.4em 0 0 0 rgba(50,0,0,.50),
-.28em .28em 0 0 rgba(50,0,0,.25)
;
}
</style>
<div style='position:relative;width:200px;height:200px;'>
<input type="button" id="start" value="start" />
<input type="button" id="stop" value="stop" />
<input type="button" id="move" value="移動" />
<doing style='position:absolute;left:100px;top:100px;'/>
</div>
<script type="text/javascript">
$.extend({
ani_start: function(name) {
$(name).css("visibility", "visible")
.css("animation", ".85s doing-rotate steps(8) infinite");
return $(name);
},
ani_stop: function(name) {
$(name).css("visibility", "hidden")
.css("animation-name", "none");
return $(name);
},
ani_move: function(name,x,y) {
$(name).css("left", x+"px")
.css("top", y+"px");
return $(name);
}
});
$("#start").click( function(){ $.ani_start("doing"); } );
$("#stop").click( function(){ $.ani_stop("doing"); } );
$("#move").click( function(){ $.ani_move("doing",50,50); } );
</script>
|
全部動くパターン ( No.2 ) |
日時: 2013/03/06 14:19 名前: lightbox
拡張子:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
#holder {
position: relative;
width: 300px;
height: 200px;
}
@-webkit-keyframes doing-rotate {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes doing-rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
doing {
position: absolute; /* 目的の性格上、親要素は position:relative */
display: block; /* 必須 : Opera の都合で最初から設定しておく必要があります */
visibility: hidden; /* 目的の性格滋養、初期は非表示 */
border-radius: 50%; /* 元の形状を丸くする為 */
font-size: 18px; /* 位置指定を em でしているので、ここを変更すると半径変更 */
width: 5px; /* サイズ変更 */
height: 5px;
/* em を使うと、font-size にサイズを連動させる事ができる */
/* width: .25em; height: .25em; */
/* box-shadow による影の複数作成 : 位置と色と不透明度を指定 */
box-shadow:
0 -.4em 0 0 rgba(50,0,0,1),
-.28em -.28em 0 0 rgba(50,0,0,.75),
-.4em 0 0 0 rgba(50,0,0,.50),
-.28em .28em 0 0 rgba(50,0,0,.25)
;
}
</style>
<div id="holder">
<doing></doing>
<input type="button" id="start" value="start" />
<input type="button" id="stop" value="stop" />
<input type="button" id="move" value="移動" />
<input type="button" id="startie9" value="start2" />
<input type="button" id="stopie9" value="stop2" />
</div>
<script type="text/javascript">
$.extend({
// 表示開始
ani_start: function(name) {
if ($.ani_value.userAgent.indexOf("msie") > -1) {
if ($.ani_value.appVersion.indexOf("msie 10.0") > -1) {
$(name).css("visibility", "visible")
.css("animation", ".85s doing-rotate steps(8) infinite");
}
// IE は、10 以外は動作しないので、手動でアニメーションする
else {
$.ani_start2(name);
}
}
else {
$(name).css("visibility", "visible")
// アニメーションを開始する css を設定する
.css("animation", ".85s doing-rotate steps(8) infinite");
}
return $(name);
},
// 表示停止
ani_stop: function(name) {
if ($.ani_value.userAgent.indexOf("msie") > -1) {
if ($.ani_value.appVersion.indexOf("msie 10.0") > -1) {
$(name).css("visibility", "hidden")
.css("animation-name", "none");
}
// IE は、10 以外は動作しないので、手動でアニメーションを止める
else {
$.ani_stop2(name);
}
}
else {
$(name).css("visibility", "hidden")
// アニメーションを停止する css を設定する
.css("animation-name", "none");
}
return $(name);
},
// 表示位置変更
ani_move: function(name,x,y) {
$(name).css("left", x+"px")
.css("top", y+"px");
return $(name);
},
// 手動アニメーション
ani_start2: function(name) {
// ループ用のプライベート関数
function loop() {
$.ani_value.timerid = window.setTimeout(loop,120);
$.ani_value.loopdeg += 45;
$(name).css("transform", "rotate("+$.ani_value.loopdeg+"deg)");
}
// 再入を防ぐ
if ( $.ani_value.timerid == null ) {
$(name).css("visibility", "visible");
loop();
}
return $(name);
},
// 手動アニメーションの停止
ani_stop2: function(name) {
$(name).css("visibility", "hidden");
// 動いている時だけ止める
if ( $.ani_value.timerid != null ) {
clearTimeout($.ani_value.timerid);
$.ani_value.timerid = null;
}
return $(name);
},
// 利用する変数
ani_value: {
loopdeg: 0,
timerid: null,
userAgent: window.navigator.userAgent.toLowerCase(),
appVersion: window.navigator.appVersion.toLowerCase()
}
});
// 初期位置
$.ani_move( "doing", 100, 60 );
var move_x = 100;
// ボタンの処理を登録
$("#start").click( function(){ $.ani_start("doing"); } );
$("#stop").click( function(){ $.ani_stop("doing"); } );
$("#move").click( function(){ $.ani_move( "doing", ( move_x < 180 ) ? move_x+=40 : move_x=100, 60 ); } );
$("#startie9").click( function(){ $.ani_start2("doing"); } );
$("#stopie9").click( function(){ $.ani_stop2("doing"); } );
</script>
|
|
|
|