Auto-Text-Scroll

JavaScript

自動でテキストが垂直にスクロールしていく「Auto-Text-Scroll」

Auto-Text-Scrollは自動でテキストが垂直でスクロールしていく機能を実装できます。1行ずつテキストがエフェクト付きでスクロールされます。フェードやスケールといったエフェクトで、テキストを次々にスクロールしながらユーザーに見せたい場合に最適です。

インターバルのセッティングも可能

デモ

デモでは下から上にテキストが自動でスクロールしながら表示されます。一番下に出てくるテキストはサイズも小さく濃さも薄い状態ですが、スクロールされながら徐々に上に来るにつれてサイズが大きくなり濃さもクッキリしていきます。

メインポジションまで来ると一番目立つ状態になり、その次のスクロールではフェードとともに消えていきます。

シンプルですが、自動でスクロールされていくその動きにユーザーも思わず注目してしまうでしょう。一行ずつ何かのテキストを自動スクロールで表示させておきたい時に役立ちますね。

setInterval(function(){ 
    dp_scroll_text()
}, 2000);

2000という値、つまりは2秒ごとにテキストをスクロールする設定なので、変更したい場合はここの値を調節してあげればOKです。

Auto-Text-Scroll

関連記事

  1. Luminous

    JavaScript

    軽くてシンプルなLightboxを実装できるスクリプト「Luminous」

    Luminousを使えば軽くてシンプルなLightboxを実装すること…

  2. Complexify

    JavaScript

    パスワードの強さを視覚的にフィードバックしてくれる「Complexify」

    Complexifyはユーザーが入力したパスワードの強さを視覚的にフィ…

  3. Ladda

    JavaScript

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

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

  4. jQuery Tooltip Basic

    JavaScript

    カスタマイズしやすいツールチップ実装「jQuery Tooltip Basic」

    jQuery Tooltip Basicは、カスタマイズしやすいツール…

  5. Toolgif

    JavaScript

    GIFアニメーションによるツールチップを実装できる「Toolgif」

    ToolgifはGIFアニメーションを活用したツールチップを実装するこ…

  6. jQuery Page

    JavaScript

    モバイルに最適なスライドやフリップを実装できる「jQuery Page」

    jQuery Pageは、スマホなどモバイルに最適なスライドやフリップ…

最近の記事

  1. KMC-80BK
  2. 味噌ラーメン〜旨辛にんにく味噌〜
  3. STP-XH70
  4. 久保田城

Instagram始めました

Facebookページ

PAGE TOP