< 記事共通の特徴 >
全デモのソース一式がダウンロード可能です。ソース一式はローカル環境ですぐに使える構成になっています。
animateを使わないスムーズモーション04
（時間差出現）
時間差出現
解説
用途・理由
animateによるモーションは少し処理が重いため、CSSによりモーションを設定したい。
順番に出現させた方がスタイリッシュでイイ感じかも。
順番に出現させた方がスタイリッシュでイイ感じかも。
個別実行
出現させる各要素に対して、個別の id または class を設定することにより、
各要素を個別に指定してモーションを実行できるようにします。
上記の各要素に関して、
（readyクラスを除去して）モーションを実行するコードは次のようになります。
これを汎用的に書き換えると次のようになります。
各要素を個別に指定してモーションを実行できるようにします。
<div class="motion_block num_1 ready">← Hello 01 --</div><!-- motion_block -->
<div class="motion_block num_2 ready">← Hello 02 --</div><!-- motion_block -->
<div class="motion_block num_3 ready">← Hello 03 --</div><!-- motion_block -->
※ id または class には、（順番に実行しやすいように）通し番号を含む名前にします。
上記の各要素に関して、
（readyクラスを除去して）モーションを実行するコードは次のようになります。
$('.motion_block.num_1').removeClass('ready');
$('.motion_block.num_2').removeClass('ready');
$('.motion_block.num_3').removeClass('ready');
これを汎用的に書き換えると次のようになります。
target_num = 1;
target_num = target_num + 1;
target = '.motion_block' + '.num_' + target_num;
$(target).removeClass('ready');
target_num = target_num + 1;
target = '.motion_block' + '.num_' + target_num;
$(target).removeClass('ready');
target_num = target_num + 1;
target = '.motion_block' + '.num_' + target_num;
$(target).removeClass('ready');
一定時間毎の繰り返し処理
一定時間毎の繰り返し処理は、下記コードになります。
一定時間毎に指定回数処理を実行したい場合は、次のようなコードになります。
var timer = setInterval(function() {
/* 一定時間毎に実行したい処理 */
}, 1000 );
※ 1000 は実行する周期(ミリ秒)です。この例の場合、1秒毎に処理が実行されることになります。
一定時間毎に指定回数処理を実行したい場合は、次のようなコードになります。
var count = 0;
var timer = setInterval(function() {
/* 一定時間毎に実行したい処理 */
/* 終了判定 */
count = count + 1;
if ( count >= 3 ) {
clearInterval( timer );
}
}, 1000 );
※ この例の場合、「一定時間毎に実行したい処理」を３回実行することになります。
※ clearInterval に setInterval の戻り値を渡すことで、繰り返しを停止できます。
時間差出現
上述した内容から、
一定時間毎に各要素を出現させるコードは以下のようになります。
一定時間毎に各要素を出現させるコードは以下のようになります。
function show_motion() {
var target_num = 0;
var timer = setInterval(function() {
target_num = target_num + 1;
target = '.motion_block' + '.num_' + target_num;
$(target).removeClass('ready');
/* 終了判定 */
if ( target_num >= 3 ) {
clearInterval( timer );
}
}, 800 );
}
まとめ
上記ポイントをまとめると、下記のようなコードになります。
<!DOCTYPE html>
<head>
<title>animateを使わないスムーズモーション5（時間差出現）</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
html, body { margin: 0; padding: 0; }
.limit_disp_inner_content {
width: 600px;
overflow: hidden;
}
.motion_block {
background: #ccffcc;
font-size: 60px;
/* 移動にかける時間を設定（登場の速度） */
-webkit-transition: all 1.6s ease;
transition: all 1.6s ease;
/* 移動後の位置 */
position: relative;
left: 0;
}
.motion_block.ready {
/* 移動前の位置 */
left: 600px;
}
</style>
</head>
<body>
<div class="limit_disp_inner_content">
<div class="motion_block num_1 ready">← Hello 01 --</div><!-- motion_block -->
<div class="motion_block num_2 ready">← Hello 02 --</div><!-- motion_block -->
<div class="motion_block num_3 ready">← Hello 03 --</div><!-- motion_block -->
</div><!-- limit_disp_inner_content -->
</body>
<script>
function show_motion() {
var target_num = 0;
var timer = setInterval(function() {
target_num = target_num + 1;
target = '.motion_block' + '.num_' + target_num;
$(target).removeClass('ready');
/* 終了判定 */
if ( target_num >= 3 ) {
clearInterval( timer );
}
}, 800 );
}
$(document).ready(function() {
show_motion();
});
</script>
</html>