AD
Related
< 記事共通の特徴 >
全デモのソース一式がダウンロード可能です。ソース一式はローカル環境ですぐに使える構成になっています。
animateを使わないスムーズモーション02
（直線出現：画面内出現）
画面内出現
解説
用途・理由
animateによるモーションは少し処理が重いため、CSSによりモーションを設定したい。
前記事のように、要素を画面外から出現させるのではなく、画面内から出現させたい。
前記事のように、要素を画面外から出現させるのではなく、画面内から出現させたい。
表示範囲制限
子要素が親要素の範囲をはみ出した場合の動作は、CSSで設定できます。
親要素に overflow:hidden を設定すると、親要素の範囲を超えた子要素は非表示になります。
以下に簡単な例を示します。
※ 上側では、子要素が親要素の範囲を超えて表示されている一方、
※ 下側では、子要素が親要素の範囲内の表示になっていると思います。
上記例のコードは以下の通りです。
デモでは、limit_disp_inner_content により表示範囲を限定しています。
デモのCSS設定は次の通りなので、
limit_disp_inner_content に含まれる要素は、width:520px の範囲内のみの表示となります。
親要素に overflow:hidden を設定すると、親要素の範囲を超えた子要素は非表示になります。
以下に簡単な例を示します。
※ 上側では、子要素が親要素の範囲を超えて表示されている一方、
※ 下側では、子要素が親要素の範囲内の表示になっていると思います。
親要素（demo01_parent）
子要素（demo01_Child）
親要素（demo01_parent.opt_add_hidden）
子要素（demo01_Child）
※ 下側の親要素に overflow: hidden を設定しています。
※ 上側の親要素には overflow を設定していないので、ブラウザに依存した動作となります。
上記例のコードは以下の通りです。
<!-- CSSの設定 -->
<style>
.demo01_Parent {
width: 200px;
margin: 5px;
padding: 10px;
background: #44cc44;
}
.demo01_Parent.opt_add_hidden {
overflow: hidden;
}
.demo01_Child {
width: 300px;
height: 60px;
padding: 10px;
background: #cc4444;
}
</style>
<!-- HTML -->
<div class="demo01_Parent">
親要素（demo01_parent）<br/>
<div class="demo01_Child">子要素（demo01_Child）</div>
</div>
<div class="demo01_Parent opt_add_hidden">
親要素（demo01_parent.opt_add_hidden）<br/>
<div class="demo01_Child">子要素（demo01_Child）</div>
</div>
デモでは、limit_disp_inner_content により表示範囲を限定しています。
<div id="main_area">
<div class="limit_disp_inner_content">
<div class="block_design type01 ready appear_top" ><p><span>↓</span></p></div><!-- block_design01 -->
<div class="block_design type02 ready appear_right" ><p><span>←</span></p></div><!-- block_design01 -->
<div class="block_design type04 ready appear_left" ><p><span>→</span></p></div><!-- block_design01 -->
<div class="block_design type03 ready appear_bottom"><p><span>↑</span></p></div><!-- block_design01 -->
</div><!-- limit_disp_inner_content -->
</div><!-- main_area -->
デモのCSS設定は次の通りなので、
limit_disp_inner_content に含まれる要素は、width:520px の範囲内のみの表示となります。
#main_area {
width: 560px;
margin: 0 auto;
padding: 20px;
letter-spacing: -.40em;
}
/* ============================================== */
/* 登場モーション関連(画面内出現のための表示範囲限定) */
/* ============================================== */
#main_area .limit_disp_inner_content {
overflow: hidden;
}
※ .limit_disp_inner_content のサイズは、#main_area の width:560px から padding の 20px×2=40px を引いた 520px になります。
まとめ
上記ポイントをまとめると、下記のようなコードになります。
<!DOCTYPE html>
<head>
<title>animateを使わないスムーズモーション2（直線出現：画面内出現）</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 {
display: table;
width: 100%;
height: 300px;
margin: 0 auto;
background: #ccffcc;
text-align: center;
/* 移動にかける時間を設定（登場の速度） */
-webkit-transition: all 5s ease;
transition: all 5s ease;
/* 移動後の位置 */
position: relative;
top: 0;
}
.motion_block span {
display: table-cell;
font-size: 70px;
vertical-align: middle;
}
.motion_block.ready {
/* 移動前の位置 */
top: 400px;
}
</style>
</head>
<body>
<div class="limit_disp_inner_content">
<div class="motion_block ready"><span>↑-- Hello --↑</span></div><!-- motion_block -->
</div><!-- limit_disp_inner_content -->
<script>
$(document).ready(function() {
$('.motion_block').removeClass('ready');
});
</script>
</body>
</html>