< 記事共通の特徴 >
全デモのソース一式がダウンロード可能です。ソース一式はローカル環境ですぐに使える構成になっています。
animateを使わないスムーズモーション03
(斜め直線出現)
斜め直線出現モーション
解説
用途・理由
animateによるモーションは少し処理が重いため、CSSによりモーションを設定したい。
縦・横ではなく、斜め方向からカッコ良く登場させたい。
縦・横ではなく、斜め方向からカッコ良く登場させたい。
CSSによる斜め直線移動
やり方は、animateを使わないスムーズモーション01(直線出現) と同じです。
出現前の位置設定で top/left の両方を設定すれば良いだけです。
CSSによる斜め直線移動は、下記2つのスタイル定義を用いて実現できます。
出現前の位置設定で top/left の両方を設定すれば良いだけです。
CSSによる斜め直線移動は、下記2つのスタイル定義を用いて実現できます。
.motion_block {
/* 移動にかける時間を設定(登場の速度) */
-webkit-transition: all 1.6s ease;
transition: all 1.6s ease;
/* 移動後の位置 */
position: relative;
top: 0;
left: 0;
}
.motion_block.ready {
/* 移動前の位置 */
top: 600px;
left: 600px;
}
※ transition / -webkit-transition により変化を 0/1 ではなく、漸次的にすることで、スムーズモーションを実現しています。
※ transition / -webkit-transition と同様の設定が2つあるのは、複数ブラウザ対応のためです。
※ transition / -webkit-transition の一方の設定は各ブラウザで無視されます。
スムーズモーションの実行
Javascriptにより適用されるスタイルを変化させることでモーションを実行します。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.block_design').removeClass('ready');
});
</script>
※ ready クラスを削除することにより、top の設定値が 600 から 0、left の設定値が 600 から 0 になります。
※ この変化が transition / -webkit-transition 設定により漸次的に行われることから、スムーズな動きになります。
移動前の要素を非表示にする
まとめ
上記ポイントをまとめると、下記のようなコードになります。
<!DOCTYPE html>
<head>
<title>animateを使わないスムーズモーション3(斜め直線出現)</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 {
height: 300px;
overflow: hidden;
}
.motion_block {
/* 移動にかける時間を設定(登場の速度) */
-webkit-transition: all 1.6s ease;
transition: all 1.6s ease;
/* 移動後の位置 */
position: relative;
top: 0;
left: 0;
}
.motion_block.ready {
/* 移動前の位置 */
top: 600px;
left: 600px;
}
</style>
</head>
<body>
<div class="limit_disp_inner_content">
<div class="motion_block ready">↑← Hello --</div><!-- motion_block -->
</div><!-- limit_disp_inner_content -->
</body>
<script>
$(document).ready(function() {
$('.motion_block').removeClass('ready');
});
</script>
</html>