タイピング風効果

今月もやってまいりました。
ウェブラボ技術メモです。

今回は文章を1文字ずつ表示させる効果をご紹介いたします。
文章だけではピンと来ないかと思いますので、
まずは、デモをごらんください!

デモ1

いかがでしたでしょうか?
こちらのソースは、

HTML は、タイピング風にさせたい文字を下記のクラスを付与し、
p タグで囲みます。

CSS は、

では、もっとより、文字を打ち込んでいるように、カーソルを表示させてみます。
まずは、デモをごらんください!

デモ2

文字の先頭の方に「_」が表示されていたと思います。

FABULOUS!!!

では、こちらのソースをご紹介致します。

まず、記述する script です。

こんな感じになります。
では、HTML はどうでしょう!?

なんということでしょう!
先ほどと変わりませんね。

では、次に CSS を見てみましょう!

先程よりもシンプルですね★

このような効果を使って、目立たせたい文字を装飾しても、
新鮮ですね★

以上、10月の技術メモでしたー(^^)

  • このページを共有する