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. ItemSlide.js

    JavaScript

    タッチやスワイプでスライドするカルーセルのjQueryプラグイン「ItemSlide.js」

    ItemSlide.jsはタッチ、スワイプ、スクロールなどでスライドす…

  2. ReadRemaining.js

    JavaScript

    記事を読むのにかかる時間を教えてくれるjQueryプラグイン「ReadRemaining.js」

    ReadRemaining.jsは記事を読むのにどのくらい時間がかかる…

  3. Stackbox.js

    JavaScript

    プルプル震えるモーダルボックスを実装できるjQueryプラグイン「Stackbox.js」

    Stackbox.jsというjQueryプラグインを使えば、プルプル震…

  4. js-offcanvas

    JavaScript

    上下左右にオフキャンバスのナビゲーションを実装できる「js-offcanvas」

    js-offcanvasは、上下左右にオフキャンバスのナビゲーションを…

  5. jquery.xtr

    JavaScript

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

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

  6. Ladda

    JavaScript

    ボタンとローディングアイコンが一緒になったUIを実装できるjQueryプラグイン「Ladda」

    Laddaはボタンとローディングアイコンが一緒になったUIを実装するこ…

最近の記事

  1. ブラジルイパネマ
  2. 梅しば
  3. BM-IBCDH13RD
  4. 雪
  5. ホットのドリップ

アーカイブ

PAGE TOP