東京都新宿区のWeb制作会社 ウェブラボ株式会社

クリエイターブログ

タイピング風効果

2013.10.24 Posted by

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

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

デモ1

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

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

CSS は、

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

デモ2

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

FABULOUS!!!

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

まず、記述する script です。

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

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

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

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

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

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

オリエンシートダウンロード

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278