AD
Current
文字出現演出01（スクリーンを下げるイメージ）
< 記事共通の特徴 >
全デモのソース一式がダウンロード可能です。ソース一式はローカル環境ですぐに使える構成になっています。
文字出現演出01
（スクリーンを下げるイメージ）
スクリーンを下げるイメージでテキストを出現させる
解説
用途・理由・概要
（スクリーンが降りて来た時の様に）テキストを上から徐々に表示する方法について説明します。
★ 背景色にグラデーションを使用していても使える方法です！
★ テキストと書いていますが、画像等でも利用可能です。
テキストの一部を表示する
テキストの一部を表示するため、表示範囲の制限を利用します。
具体的イメージは以下の通りです。
上記イメージのコードは次の通りです。
※ 親要素のCSS設定に overflow: hidden を設定することで、
※ 親要素の範囲を超える子要素は表示されなくなります。
具体的イメージは以下の通りです。
テキスト(制限なし）
テキスト（制限あり）
親要素（黒枠・白背景）のサイズを変化させることで、子要素（テキスト）を徐々に出現させる事が出来ます。
上記イメージのコードは次の通りです。
<style>
.demo_large_font {
font-size: 40px;
}
.demo_screen_area {
height: 30px;
background: #ffffff;
border: 1px solid #000000;
}
.demo_screen_area.demo_overflow {
overflow: hidden;
}
</style>
<div class="demo_screen_area"><div class="demo_large_font">テキスト(制限なし）</div></div>
<br/><br/>
<div class="demo_screen_area demo_overflow"><div class="demo_large_font">テキスト（制限あり）</div></div>
場所を確保する
要素のサイズを変えるとレイアウトが崩れてしまうため、
（サイズを変更する）親要素の親要素をつくり場所を確保することで、それを防ぎます。
デモでは次のように設定しています。
演出の実行は、今までと同様にJavascriptで行っています。
（サイズを変更する）親要素の親要素をつくり場所を確保することで、それを防ぎます。
デモでは次のように設定しています。
<div class="effect_screen_appear type01">
<div class="effect_screen_appear_sub">
<div>徐々に表示するテキスト</div>
</div>
</div>
.effect_screen_appear {
display: block;
}
.effect_screen_appear .effect_screen_appear_sub {
display: inline-block;
height: 0px;
overflow: hidden;
vertical-align: top;
}
.effect_screen_appear.finished .effect_screen_appear_sub {
height: 100%;
}
.effect_screen_appear.type01 {
height: 90px;
}
.effect_screen_appear.type01 .effect_screen_appear_sub {
-webkit-transition: all 1.5s linear;
transition: all 1.5s linear;
}
※ effect_screen_appear が場所確保用の要素です。
※ effect_screen_appear_sub がサイズを変更する）要素です。
※ type01 は、演出を行う要素毎に「確保する場所のサイズ」「出現速度」を設定するために使用しています。
演出の実行は、今までと同様にJavascriptで行っています。
$('.effect_screen_appear').addClass('finished');
まとめ
上記ポイントをまとめると、下記のようなコードになります。
<!DOCTYPE html>
<head>
<title>文字出現演出1（スクリーンを下げるイメージ）</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
html, body { margin: 0; padding: 0; }
.font_large { font-size: 60px; line-height: 1; }
.effect_screen_appear {
display: block;
}
.effect_screen_appear .effect_screen_appear_sub {
display: inline-block;
height: 0px;
overflow: hidden;
vertical-align: top;
}
.effect_screen_appear.finished .effect_screen_appear_sub {
height: 100%;
}
.effect_screen_appear.type01 {
height: 60px;
}
.effect_screen_appear.type01 .effect_screen_appear_sub {
-webkit-transition: all 3.5s linear;
transition: all 3.5s linear;
}
</style>
</head>
<body>
<div class="effect_screen_appear type01">
<div class="effect_screen_appear_sub">
<div class="font_large">徐々に表示するテキスト</div>
</div>
</div>
<script>
$(document).ready(function() {
$('.effect_screen_appear').addClass('finished');
});
</script>
</body>
</html>
関連記事一覧