テキストアニメーションは、タイトルなどユーザーの注意を引きたい箇所に導入します。
web制作を行う上で、テキストアニメーションの理解はマストになってきますので、こちらの記事で一緒に学んでいきましょう。
テキストアニメーション
今日、テキストアニメーションは多くのサイトに導入されています。
アニメーションは、サイトをリッチ見せたり、情報を伝える手段として使用したりと、用途は様々ですが、適切に使用して初めて効果が出でるものだったりもします。
人は、動きのあるものに反応する習性があり、これはweb制作にも役立てることができます。webサイトには、「伝えたい情報」が必ず存在し、それらの情報にユーザーの視線を誘導するためにアニメーションを導入することが多いです。しかし、過度なアニメーションやサイトデザインとアンマッチなアニメーションを導入してしまうと離脱の原因となり、逆効果になってしまうこともありますので、自身が見て、操作して心地い良いと感じるアニメーションを導入するようにしましょう。
この記事では、基本的なテキストアニメーションのみ扱っていきますが、実務で実装する際は、どのようなアニメーションが効果的か考え、導入しましょう。
フェードイン
最もシンプルなテキストアニメーションを実装します。
処理は簡単で、透明度を操作しながら、1秒かけてテキストを表示します。
こちらのアニメーションは、fadeIn()メソッドを利用し、実装することも可能ですが、今回はクラスを付与し、実行する方法を解説していきたいと思います。
HTMLを記述
以下、HTMLコードとなります。
<button class="animation-btn">BUTTON</button>
<p class="animation-text">Sample Text</p>HTMLの構造はシンプルです。
CSSを記述
以下、CSSコードとなります。
.animation-txt{
opacity: 0;
}
.is-animation-txt-active{
opacity: 1;
transition-duration: 1s;
}それでは、個別に解説していきたいと思います。
.animation-txt{
opacity: 0;
}.animation-txtには、アニメーション前のスタイルを指定します。
opacity: 0;を指定し、テキストを非表示(透明)にしています。
.is-animation-txt-active{
opacity: 1;
transition-duration: 1s;
}.is-animation-txt-activeは、アニメーション後のスタイルになります。ボタンがクリックされたタイミングで、.animation-txtに付与しアニメーションを実行します。
opacity: 1;を指定し、テキストを表示します。また、1秒かけてアニメーションを実行したいので、transition-duration: 1s;を指定しています。
jQueryを記述
以下、jQueryコードとなります。
$(function(){
$('.animation-btn').on('click', function(){
$('.animation-txt').addClass('is-animation-txt-active');
});
}); ボタンがクリックされたタイミングでaddClass()を利用し、.is-animation-txt-activeを付与しています。
フェードアップ
先ほどのフェードインにCSSを2行追加するだけでフェードアップを実装できます。処理自体は、フェードインと変わりませんので、CSSのみ解説していきたいと思います。
10px下の位置から透明度を操作しながら、1秒かけて元の位置に戻します。
HTMLを記述
以下、HTMLコードとなります。
<button class="animation-btn">BUTTON</button>
<p class="animation-text">Sample Text</p>CSSを記述
以下、CSSコードとなります。
.animation-txt{
opacity: 0;
transform: translate3d(0, 10px, 0);
}
.is-animation-txt-active{
opacity: 1;
transition-duration: .8s;
transform: translate3d(0, 0, 0);
}それでは、個別に解説していきたいと思います。
.animation-txt{
opacity: 0;
transform: translate3d(0, 10px, 0);
}上記は、アニメーション前のスタイルになります。
フェードインにtransform: tranlate3d(0, ~px, 0);を追加するだけで、フェードアップが実装できます。translate3d(0, 10px, 0)箇所でテキストを10px下に配置しています。
transformを利用してアニメーションを実行する際は、3dで実装しましょう。transformは、以下のように複数の記述形式が用意されおり、アニメーションを実行する際のパフォーマンスは3dが最も良いとされています。translateだけでなく、 scale, rotateも同様に3dで実装するようにしましょう。
- transform: translateX(~);
- transform: translateY(~);
- transform: translate(~, ~);
- transform: translate3d(~, ~, ~);
.is-animation-txt-active{
opacity: 1;
transition-duration: 1s;
transform: translate3d(0, 0, 0);
}アニメーション後のスタイルになります。
translate3d(0, 0, 0)を指定し、元の位置に戻しています。
jQueryを記述
以下、jQueryコードとなります。
$(function(){
$('.animation-btn').on('click', function(){
$('.animation-txt').addClass('is-animation-txt-active');
});
}); アニメーションを導入する際の注意
今回は、テキストアニメーションについて解説しました。
アニメーションを導入することで、ユーザーの注意を引くことが容易になります。しかし、アニメーションは導入箇所や導入箇所の数によってはユーザーにストレスを与えてしまい、離脱の原因にもなります。従って、アニメーションを導入する際は、ご自身が閲覧して心地いいと思えるサイトになるようにしましょう。
