【javascript】jQueryでクラスを切り替え、CSS3でアニメーションさせるテキストロゴ

2016年4月12日css, jQuery, WEB制作

jQueryでCSSを操作してアニメーション効果を出す手法が、ちょっと前から流行っていまして、簡単に出来るテキストアニメーションを作ってみました。

概要としてはこんな感じです。

setIntervalを使い一定時間で動作させる。
jQueryでクラス名を切り替える(ランダム)
transitionやanimateを設定でアニメーションさせる

今回のデモでは、css3 transitionを使って実装しました。

デモ

※Resultボタンを押して動作を確認
こちらの例では、分かりやすくコードの実行時間を早くしています。

Resultタブを開いて、マウスをテキストに何回か乗せて動作を確認してみてください。
一定時間でクラス名を切り替えているので、アニメーションが変わります。

コード解説

このテキストエフェクトのHTMLは以下の様になっています。

1文字づつspanタグで分けています。
これはHTML側で分けてもいいのですがSEO的に気になる場合はjavascriptで、動的にspanで分けた方がいいと思います。

次にCSSです。

全ソースはデモの方で見れますので、一部コードを元に紹介します。

■ポイント
span:nth-child(odd)とspan:nth-child(even)で奇数・偶数番目の要素にそれぞれのスタイルを指定。
#site-title0 a:hover > span:nth-child(odd)と(even)で、マウスオーバー時のスタイルを指定。
位置調整なども含め、text-shadowの記述のみで行っている。

CSSを調整して、各文字の色を変更したり、大きさやを変えることも出来ます。

今回はtransitionのデモのみですが、animateを使えば更に表現の幅が広がりますね。

最後にjavascript

■ポイント
setInterval(function() {で指定時間ごとにコードを動作させる。
Math.randomで指定範囲の乱数生成
同じ数値を生成する事もあるので、条件分岐で回避

まとめ

完全に自動化までは行きませんが、お手軽に出来るテキストエフェクトでした。
もっと凝って作ればすんごいアニメーションが作れると思います。

この記事が気に入ったら
『いいね』しよう!