タイピング風効果

今月もやってまいりました。

ウェブラボ技術メモです。

今回は文章を1文字ずつ表示させる効果をご紹介いたします。

文章だけではピンと来ないかと思いますので、

まずは、デモをごらんください!

デモ1

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

こちらのソースは、

HTML は、タイピング風にさせたい文字を下記のクラスを付与し、

p タグで囲みます。

CSS は、

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

まずは、デモをごらんください!

デモ2

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

FABULOUS!!!

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

まず、記述する script です。

こんな感じになります。

では、HTML はどうでしょう!?

なんということでしょう!

先ほどと変わりませんね。

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

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

このような効果を使って、目立たせたい文字を装飾しても、

新鮮ですね★

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

  • このページを共有する

関連記事こちらの記事も合わせてどうぞ。