Text Scramble Effect

JavaScript

テキストをスクランブルしながら表示していく「Text Scramble Effect」

Text Scramble Effectはテキストをカシャカシャとスクランブルしながら指定したテキストを表示していくスクリプトです。文字をただ表示させるのではなく、動きを加えながらユーザーに見せたいときに便利ですね。

Text Scramble Effect

デモ

デモでは文字をカシャカシャとスクランブルしながら目的のテキストを表示しています。どこか映画のワンシーンのような、そんな雰囲気を感じさせるアニメーションですね。

実際のコードもとてもシンプルで軽量なので、気軽に導入できるのではないでしょうか。

また、デモでは表示させるテキストは「phrases」という変数に格納されています。表示される順番も、単純に上に記述されたテキストから表示されていき、一番最後のテキストが表示されたあとは、ループしてまた上から順番に表示されます。

Text Scramble Effectはシンプルな機能ですが、テキストに動きがついているのとついていないのとでは、ユーザーの注目度も大きく変わってくると思います。

どうしても見てほしいテキストや注目してほしいテキストがあるという人は、ぜひText Scramble Effectを参考にしてみてはいかがでしょうか?

というわけで、テキストをカシャカシャと動かしながら目的の文字を表示していく「Text Scramble Effect」のご紹介でした。

Text Scramble Effect

関連記事

  1. JavaScript

    スクロールバーにあと何分で読めるかを表示してくれるjQueryプラグイン「jQuery Readin…

    とてもシンプルですが何気に便利そうだったので使ってみました。長文記事を…

  2. Trunk.js

    JavaScript

    滑らかなスライド表示がいい!レスポンシブなナビゲーションメニュー「Trunk.js」

    Trunk.jsはレスポンシブに対応したナビゲーションメニューを実装す…

  3. Lity

    JavaScript

    超軽量でアクセシブル・レスポンシブなLightboxを実装できる「Lity」

    Lityは、超軽量でアクセシブル・レスポンシブなLightboxプラグ…

  4. no-image

    JavaScript

    シンプルで美しい軽量のjQueryモーダルウィンドウ「umodal」

    umodalはスッキリしたシンプルで美しいモーダルウィンドウを実装でき…

  5. JavaScript

    リスト化したテキストを円になるように配置してくれるjQueryプラグイン「Extremes」

    ちょっと面白そうだったので使ってみました。リスト化した各テキストを円を…

  6. xGallerify

    JavaScript

    サイズが異なる画像でもキレイに表示できるギャラリー実装「xGallerify」

    xGallerifyはギャラリーを作成するのに最適なjQueryプラグ…

最近の記事

  1. Soundcore Liberty Air 2
  2. Soundcore Liberty 2
  3. マザーツリー
  4. RICOH THETA SC2

アーカイブ

PAGE TOP