Auto-Text-Scroll

JavaScript

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

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

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

デモ

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

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

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

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

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

Auto-Text-Scroll

no-image軽量なスティッキー要素を実装できるjQueryプラグイン「Zebra Pin」前のページ

レスポンシブなタブ・アコーディオン機能を実装できる「Multipurpose Tabcontent jQuery」次のページno-image

関連記事

  1. TwentyTwenty

    JavaScript

    2枚の画像を見比べれるjQueryプラグイン「TwentyTwenty」

    TwentyTwentyは2枚の画像を見比べれる便利なjQueryプラ…

  2. jQuery fullsizable
  3. Bara-Bones-Slider

    JavaScript

    優れたカスタマイズ性を有するjQueryスライダー「Bara-Bones-Slider」

    Bara-Bones-Sliderは、優れたカスタマイズ性を有するイメ…

  4. Yamm 3

    JavaScript

    メガメニューをBootstrap3で実装する「Yamm 3」

    Yamm 3はメガメニューをBootstrap3を使って実装することが…

  5. no-image

    JavaScript

    ダイナミックに回転してコンテンツが切り替わる「Page Scroll 3D」

    Page Scroll 3Dは、クルッとダイナミックに回転してコンテン…

  6. Responsive Sidebar Navigation

最近の記事

  1. 椿屋特製アイス珈琲
  2. 有栖川公園
  3. グーディオ オーガニックチョコレート(ミント)
  4. チキンバターマサラとシュリンプバターマサラ
  5. 恵比寿のダ・ミケーレのピザ

アーカイブ

PAGE TOP