本日はシンプルだけど、格好良い演出の出来るテキストアニメーションを1つ記載していきます。
具体的には、javascriptなどは使用せず、CSSのみで動かす方法で、文字1つ1つを動かすような演出ではなく、1つの要素をマスクで隠した後、下から上へスライドインさせて表示するやり方になります。
ですので、テキストだけではなく、画像などの要素にも使用出来ます。
とりあえず、どんなモノか見た方が早いので、実際のデモを載せます。
１．デモ
※上記領域、右側にカーソル移動後、現れたRERUNボタンクリックで再度再生。
※スマホの場合は上記領域、右下あたりをタップでRERUNボタンが現れます。
メインビジュアルの上で表示させるキャッチコピーの演出など、基本的にはサイトにアクセスした時に、表示させるテキストに使えると思います。
２．HTMLファイル
<div class="catch_wrap">
<h2 class="catch">Hope and keep busy.</h2>
<div class="line"></div>
</div><div class=”line”></div>の部分が、最初にセンターから左右に向かって伸び、左右に伸びきった後、上に領域を伸ばして最後は消えてしまう黒い部分になります。
<div class=”catch_wrap”>で囲うコトで、<div class=”line”></div>の拡大、伸びる範囲を制限します。
３．CSSファイル
.catch_wrap{
position: relative;
display: inline-block;
overflow: hidden;
}
.catch {
opacity: 0;
margin: 0;
position: relative;
bottom: -30px;
font-size: 30px;
white-space: nowrap;
animation: catch 2s ease 4s 1;
animation-fill-mode: forwards;
}
.line{
background-color: #000;
width: 100%;
bottom: 0;
position: absolute;
transform: scaleX(0);
animation: line 5s ease 2s 1;
animation-fill-mode: forwards;
}
@keyframes line {
0% {bottom: 0;height: 5px;}
20% {transform: scaleX(1);}
40% {height: 5px;}
50% {bottom: 0;height: 100%;}
70% {bottom: 100%;height: 100%;}
100% {bottom: 100%;height: 0;transform: scaleX(1);}
}
@keyframes catch {
0% {opacity: 0; }
100% {opacity: 1; bottom: 0;} }.catch_wrapのdisplayはblockまたは記載なくても良いですが、テキストの長さに演出領域を抑えたい場合はinline-blockにしておきます。
overflow: hidden;に設定するのは、.catchの部分をスライドイン演出させるために、スタート位置をbottom: -30px;とし、親要素の.catch_wrapからはみ出る形をとっているので、それを隠すためです。
.catchのopacity: 0;は最初はテキストを見えないようにしておくためです。
@keyframes catch にありますが、100% {opacity: 1; }で、最終的には見えるようにします。
white-space: nowrap;としてあるのは、テキストが改行しないようにです。
テキストが改行してしまうと、縦幅がかわり想定していた動きではなくなってしまうからです。
animation: catch 2s ease 4s 1;は、プロパティを左から説明すると、@keyframesにcatchと言う名前で設定したモノを2秒の中で処理が終わるように実行します。
また、動き方はeaseと言う動き方にして、CSSデータを読み込んでから4秒後に開始し、1回だけ再生すると言う意味です。
animation-fill-mode: forwards;はアニメーション終了後、最後の@keyframes(100%)のスタイルを維持すると言う意味です。
.lineのtransform: scaleX(0);は要素を縮小させる為に使用しています。
scale()は要素を真ん中を軸にして、拡大縮小してくれます。
それによって、@keyframes lineでtransform: scaleX(1);と設定するコトによって、真ん中から伸びていく(拡大)動きになる訳です。
@keyframesに関しましては、lineであれば、5秒間の中で0%から100%の動きをさせると言う指定になっています。
単純に1秒で20%処理が進む形です。
0% {bottom: 0;height: 5px;}とするコトで、.catch_wrapの領域の一番下の部分で、高さ5pxの範囲でスタートします。
lineのアニメーションがスタートして半分経ったら、上へ伸びる動きに変わり、最後はheight: 0;としline要素を消します。
ざっとした説明で、1個1個プロパティ解説をした訳ではないので、わかりにくい部分もあるかと思いますが、とりあえずコピペである程度使えると思います。
ただ、フォントサイズが違ったり、画像を使う場合で結構高さがあるモノを使うと、この設定では上手く動作しません。
その場合は、.catchと.lineのanimationの秒数を調整すると、改善出来ると思います。