Tres Innovation

2017年05月22日

CSSで簡単にテキストをなぞるようにアニメーションを作る方法!

Pocket

 

 

 

番野です。

 

お久しぶりのブログ登場でございます。

 

最近はオフィスでの仕事よりも外でお客様とお会いする事が多い為

会社外でプログラミングについてお話する機会が増えました。

 

そんな中テキストをなぞるようなアニメーションをして欲しいとご要望があり、

久しぶりにCSSを使いましたのでメモ書きとして残したいと思います。

 

 

 

CSSでテキストをなぞるようにアニメーションしながら色を変える

 

 

 

なぞるといっても書き順通りに文字を書いていくようなものではなくて、

左から右へ徐々にスライドさせて色を変えるエフェクト。

 

まず初めにJavascriptは利用せず、CSSだけで実装します。

ここでは単純にマウスホバーでアニメーションさせたものを紹介します。

 

 

 

マウスオンでテキストがなぞるような動き

 

 

 

まずはデモページで四角い枠内をマウスホバーしてみてください。

 

DEMO01

 

テキストの色が左から右へ徐々にスライドしながら変化しているのが分かると思います。
古いブラウザには対応していませんが、最新のブラウザであれば問題ないようです。

 

 

 

HTML・CSS

 

 

 

HTML

 

Welcome Tresinnovation

 

HTMLは自由です。

必要となるのはデータ属性で、値にp要素内と同じテキストを入力しておく事。

 

 

 

CSS

 

 

 

after疑似要素でスライドしながら現れる黒いテキストを作成。

ポイントはcontentプロパティのattrに、HTMLで設定したデータ属性を指定する事。
こうすることでデータ属性の値を取得することができ、全く同じテキストの文字列が2つできることになります。

 

これを一旦、clipプロパティを使って全て切り抜き(rect内、左から2番目のrightをゼロにする)、疑似要素のテキストを非表示の状態にします。

 

マウスホバー時に、アニメーションしながらスライドするように見せるためtransitionを設定します。

あとはhover疑似クラスに、今度はテキストが表示されるだけの長さのpx値をclipプロパティのrightに指定します。

 

 

clipプロパティは、position:absoluteを持った要素にだけ適用されるので、

忘れずに設定しておく必要があります。

この時、親要素にposition:relativeを設定しておくと、位置を固定しやすくなります。

 

 

ホバーエフェクトでの実装方法は以上になります。

次は簡単なJSを使って別の活用方法をご紹介します。

 

 

 

JSを使ってページ読み込み時にテキストをなぞらせる。

 

 

 

お洒落なサイトでページ読み込み時や、スクロールをしてコンテンツにエリアに入るとテキストがなぞられるようなアニメーションを見た事があると思います。

今回は上記で説明した方法と簡単なjsを組み合わせて自動でアニメーションする方法を解説したいと思います。

 

 

 

HTML・CSS・JS

 

 

 

HTML

 

Welcome Tresinnovation

HTMLは先ほど同じ記述で。
data-txt=の指定を忘れずに。

 

 

CSS

 

 

CSSも大枠は変わりません。
ここでは後ほどJSでページ読み込み時で.animateというクラスを追加させる為、擬似クラスの:hoverの部分を追加するクラス名を指定しおきます。

 
JS

 

 

基本的なクラスを追加する処理です。

.textに先ほどCSSで予め記述していたanimateというクラスを付ける処理になります。

 

以上でページ読み込み時にテキストがなぞられるようなアニメーションが実装できます。

下記、デモページよりご確認ください。

※もちろんWEBフォントにも対応してます。

 

 

 

DEMO
DEMO01

 

 

 

まとめ

 

 

いかがでしたでしょうか?

数あるマウスオンのレパートリーの一つにもなり、

ページ内の目立たせたいテキストに使用するのもありかと思います。

是非使ってみてくださいね!

 

 

 

 

 

 

この記事を書いた人

I hope share!この記事をシェアする