最近のWEBサイトのトレンドは動きのあるものが増えてきていますよね。
今回はその中でもよく見かける色付きのラインが横から現れて消えていったその下にテキストが現れるというアニメーションの作成方法をご紹介します。
目次
動きのDEMO
今回の完成目標は上記のような感じです。本サンプルでは一回限りの動きですので、再度確認されたい場合は画面を更新してお確かめください。
HTML・CSSの書き方
HTMLサンプル
HTMLのコードは下記になります。これはサンプルですので、class名などは実際に試される場合は任意のお名前でお作りください。
今回は通りすぎるというイメージから名前をpassingとして設定してみました。
<div class="passing move"> <div class="passing-box"> <div class="passing-bar"> <div class="passing-txt">左から右に現れて文字だけ残る<br>CSSアニメーション</div> </div> </div> </div>
ちなみに何個もdivで囲っていますが、実際にはもっと省略していただいても構いません。
CSSサンプル
CSSのコードは下記になります。これはあくまでサンプルですので、色や文字の大きさなどお好きに変更してください。
/* animation */
@-webkit-keyframes passing-bar{
0% {
left: 0;
right: auto;
width: 0;
}
50% {
left: 0;
right: auto;
width: 100%;
}
51% {
left: auto;
right: 0;
width: 100%;
}
100% {
left: auto;
right: 0;
width: 0;
}
}
@keyframes passing-bar{
0% {
left: 0;
width: 0;
}
50% {
left: 0;
width: 100%;
}
51% {
left: 0;
width: 100%;
}
100% {
left: 100%;
width: 0;
}
}
@-webkit-keyframes passing-txt{
0% { opacity: 0; }
50% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes passing-txt{
0% { opacity:0; }
50% { opacity:0; }
100% { opacity:1; }
}
/* css */
.passing .passing-box {
display: block;
text-align: center;
}
.passing .passing-bar {
position: relative;
display: inline-block;
/* 後ほど解説 */
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.passing .passing-bar:before {
content: '';
display: inline-block;
width: 0;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
/* 任意の値 */
background: #000;
}
.passing .passing-txt {
opacity: 0;
/* 後ほど解説 */
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
/* 任意の値 */
font-size: 4.0rem;
font-weight: bold;
line-height: 1.5;
}
.passing.move .passing-bar:before {
-webkit-animation: passing-bar 1s ease 0s 1 normal forwards;
animation: passing-bar 1s ease 0s 1 normal forwards;
}
.passing.move .passing-txt {
-webkit-animation: passing-txt 0s ease .5s 1 normal forwards;
animation:passing-txt 0s ease .5s 1 normal forwards;
}ワンランクUP①：javascript・jQueryでより汎用的に！
上記の記述で動きは実装できたでしょうか？
動きが実装できたら、今度は実際にWEBサイトでも使用したいところですが、上記の記述だけでは実は汎用性がありません。ページの一番上に設定してファーストビュー内に収まっているならば問題ありませんが、ページの中腹などで使用したくともアニメーションはページにアクセスした時点で動きが始まってしまいます。
なので、実際に運用するときはスクロールに合わせて動くようにjsもしくはjQueryを使ってclassを付与して、classが付いた時にanimationが動くようにするのが、実際の運用のポイントです。
今回のサンプルで言えば、js・jQueryで付与するclassは「move」になります。もちろん任意の名前ですのでお好きなものを命名してください。
今回はjQueryのサンプルもご用意しました。例えばですが、実際にスクロールによって動きを付けるには下記のようなjQueryを記載しましょう。
$(window).scroll(function(){
$(".passing").each(function(){
var imgPos = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > imgPos - windowHeight + windowHeight / 4){
$(this).addClass('move');
}
});
});ワンランクUP②：animationを滑らかにする
CSSアニメーションを実装すると動きがカクつくことはありませんか？
それを改善するCSSの記述方法があります。上記のCSSサンプルにも記載していたものですが、下記になります。
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);この記述をすると普段CPUで処理しているものをGPUを使って処理してくれるらしく、アニメーションの動きが滑らかになるそうです。
まとめ
いかがだったでしょうか？
CSSを利用したアニメーションは近年当たり前のように使われるようになってきていますので、ぜひ自社のWEBサイトにも取り入れてみてください。また今回のサンプルを応用すれば文字だけでなく画像などを表示させるときの表現にも使えますね。また今回は単色の背景色でしたがグラデーションにするなどもおすすめです。
最近よく見る動きのひとつですので、ぜひお試しください。
