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. no-image

    JavaScript

    レスポンシブでスタイリッシュな「lightbox-jquery-plugin」

    lightbox-jquery-pluginは、レスポンシブに対応した…

  2. Owl Carousel

    JavaScript

    タッチ操作やレスポンシブにも対応したカルーセルを実装できるjQueryプラグイン「Owl Carou…

    素晴らしいカルーセルを実装できるjQueryプラグインがあったのでご紹…

  3. no-image

    JavaScript

    シンプルでパワフルなセレクトボックスを実装できる「SelectPage」

    SelectPageはシンプルながらも高いカスタマイズ性を備えたパワフ…

  4. jTableScroll

    JavaScript

    ヘッダーとフッターを固定したままスクロール可能なテーブル「jTableScroll」

    jTableScrollはヘッダーとフッターを固定したままスクロール…

  5. no-image

    JavaScript

    スマホなどに最適なテーブルを実装できる「Mobile-Friendly Table」

    Mobile-Friendly Tableはスマホなどのモバイルに最適…

  6. jquery.xtr

    JavaScript

    クライアントサイドで変換してくれる「jquery.xtr」

    jquery.xtrはページのリフレッシュなしにクライアントアイドでテ…

最近の記事

  1. Olli
  2. 単語帳メーカー(Flashcard Maker App)
  3. 1Password 7
  4. 風に揺れる草

Facebookページ

PAGE TOP