AD
Related
< 記事共通の特徴 >
全デモのソース一式がダウンロード可能です。ソース一式はローカル環境ですぐに使える構成になっています。
animateを使わないスムーズモーション05
（時間差出現・到着同時）
時間差出現・到着同時
解説
用途・理由
animateによるモーションは少し処理が重いため、CSSによりモーションを設定したい。
時間差で現れた要素が同時に所定位置に到着するような演出を行いたい。
※ 前記事では、時間差出現に Javascriptのタイマ（setInterval）を利用しましたが、
※ 同時に到着させる場合は、タイマ等を使用せず簡単に実装できます。
時間差で現れた要素が同時に所定位置に到着するような演出を行いたい。
※ 前記事では、時間差出現に Javascriptのタイマ（setInterval）を利用しましたが、
※ 同時に到着させる場合は、タイマ等を使用せず簡単に実装できます。
同時到着
同時に到着（同時に変化を終わらせる）には、
変化に使用する時間を同じに設定して、同時に変化を開始すれば良いので、
CSSの設定は、今までと同様に下記コードで問題ありません。
デモでは（等速モーションの方がしっくり来たので）次のようにしています。
変化に使用する時間を同じに設定して、同時に変化を開始すれば良いので、
CSSの設定は、今までと同様に下記コードで問題ありません。
-webkit-transition: all 1.6s ease;
transition: all 1.6s ease;
デモでは（等速モーションの方がしっくり来たので）次のようにしています。
-webkit-transition: all 3.5s linear;
transition: all 3.5s linear;
※ ※ transition / -webkit-transition により変化を 0/1 ではなく、漸次的にすることで、スムーズモーションを実現しています。
※ linear 部分は変化具合の設定です。 linear は一定速度で変化、ease は強弱のある速度で変化します。
※ 詳しくは「CSS transitionの使用」等を御参照ください。
時間差出現
変化開始（移動開始）を同時に行いながら、出現タイミングをズラすためには
出現前の配置を順番に遠く設定します。
デモでは、次のように設定しました。
出現前の配置を順番に遠く設定します。
デモでは、次のように設定しました。
/* 登場前配置の設定 */
/* 配置を順番に遠くして、登場に時間差をつける */
.ready.block_design.type01 { top: -300px; left: -400px; }
.ready.block_design.type02 { top: -700px; left: 800px; }
.ready.block_design.type03 { top: 700px; left: -800px; }
.ready.block_design.type04 { top: 1900px; left: 2000px; }
まとめ
上記ポイントをまとめると、下記のようなコードになります。
<!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: 800px;
overflow: hidden;
}
.block_design {
display: inline-block;
width: 200px;
height: 100px;
background: #ccffcc;
font-size: 30px;
/* 移動にかける時間を設定（登場の速度） */
-webkit-transition: all 3.5s linear;
transition: all 3.5s linear;
/* 移動後の位置 */
position: relative;
left: 0;
}
/* 登場前配置の設定 */
/* 配置を順番に遠くして、登場に時間差をつける */
.ready.block_design.type01 { left: 200px; }
.ready.block_design.type02 { left: 400px; }
.ready.block_design.type03 { left: 600px; }
.ready.block_design.type04 { left: 800px; }
</style>
</head>
<body>
<div class="limit_disp_inner_content">
<div class="block_design type01 ready appear_bottom appear_right" >←</div><!-- block_design01 --><br/>
<div class="block_design type02 ready appear_bottom appear_left" >←</div><!-- block_design01 --><br/>
<div class="block_design type03 ready appear_top appear_right" >←</div><!-- block_design01 --><br/>
<div class="block_design type04 ready appear_top appear_left" >←</div><!-- block_design01 -->
</div><!-- limit_disp_inner_content -->
<script>
$(document).ready(function() {
$('.block_design').removeClass('ready');
});
</script>
</body>
</html>