ソース掲示板




すべてから検索

キーワード   条件 表示 現行ログ 過去ログ トピックス 名前 本文
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>
このアーティクルの参照用URLをクリップボードにコピー メンテナンス
全部動くパターン ( 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>
このアーティクルの参照用URLをクリップボードにコピー メンテナンス