【簡単CSS・jQuery】左から右に流れるようなテキストアニメーションを実装する方法
ある要素がスクロール位置まできたら左から右へ流れるようなアニメーション（テキストエフェクト）を実装したい。
本記事ではCSS・jQueryを使ってこのような悩みを解決します。
実装サンプル
See the Pen
左から右テキストエフェクト by Kohei (@kouk05)
on CodePen.0
実装サンプルです。
スクロールすると、テキストが左から右へ流れるようにアニメーションされてる事がわかります。
実装方法は以下の通りです。
HTML
<span class="leftAnime">
<span class="leftAnimeInner">
左から右テキストエフェクト
</span>
</span>
まず最初にアニメーションを実装したいHTML要素にleftAnimeクラス、その子要素にleftAnimeInnerクラスを付与します。
CSS
/*左から右テキストエフェクト*/
.leftAnime {
opacity: 0;
overflow: hidden;
display: inline-block;
}
.leftAnimeInner {
display: inline-block;
}
//次章で追加するクラス
.slideAnimeLeftRight {
animation-name: slideTextX100;
animation-duration: 1s;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes slideTextX100 {
from {
transform: translateX(-100%);
/*要素を左の枠外に移動*/
opacity: 0;
}
to {
transform: translateX(0);
/*要素を元の位置に移動*/
opacity: 1;
}
}
//次章で追加するクラス
.slideAnimeRightLeft {
animation-name: slideTextX-100;
animation-duration: 1s;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes slideTextX-100 {
from {
transform: translateX(100%);
/*要素を右の枠外に移動*/
opacity: 0;
}
to {
transform: translateX(0);
/*要素を元の位置に移動*/
opacity: 1;
}
}
上記CSSを前章で追加したクラス・次章のjQueryで追加するクラスに付与します。
簡単に説明すると@keyframes、transform: translateX();プロパティを使って要素を最初に枠外へ移動します。
この時、leftAnimeクラスは左枠外へ移動、子要素のleftAnimeInnerクラスは右枠外へ移動します。
要素がスクロール位置まできたらアニメーションプロパティを付与し、要素を元の位置に戻します。
JQuery
function slideAnime() {
//テキストが左から右に流れるアニメーション
$('.leftAnime').each(function () {
var elemPos = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
//要素がスクロール位置まできたら
if (scroll >= elemPos - windowHeight) {
//クラス付与
$(this).addClass("slideAnimeLeftRight");
$(this).children(".leftAnimeInner").addClass("slideAnimeRightLeft");
} else {
//クラス削除
$(this).removeClass("slideAnimeLeftRight");
$(this).children(".leftAnimeInner").removeClass("slideAnimeRightLeft");
}
});
}
//スクロールしたらアニメーションさせる
$(window).scroll(function () {
slideAnime();
});
// ページが読み込まれたらアニメーションさせる
$(window).on('load', function () {
slideAnime();
});
jQueryを使って要素位置までスクロールしたらクラスを付与します。
leftAnimeクラスにはslideAnimeLeftRightクラスを付与。
子要素のleftAnimeInnerクラスにはslideAnimeRightLeftクラスを付与します。
スクロール位置が要素を離れたら上記付与したクラスを削除します。
以上の実装手順で、要素位置まできたら左から右へ流れるようなテキストアニメーションの完成です。
まとめ
webページをエレガントに見せたいときなどに役立つかもです。
以上で解説を終わります。
目次
