jquery.autoscroll-text-tape

JavaScript

テキストを自動スクロールできる「jquery.autoscroll-text-tape」

jquery.autoscroll-text-tapeはテキストを水平に自動でスクロールさせることができるjQueryプラグインです。自動でスクロールさせたりホバーしたときにだけスクロールさせたりといったことができます。

jquery.autoscroll-text-tape

デモ

デモページでは、WITHOUT PLUGIN、WITH PLUGIN (DEFAULT)、WITH PLUGIN (MOVE ON HOVER)といったサンプルがいくつか用意されています。

テキストが自動で水平方向にスクロールしているものやホバー時にスクロールされるものなどの動作を確認できます。

ちなみに、ホバーしたときにスクロールをするか否かはオプションの「moveOnHover」で設定可能です。ホバー時にスクロールしたい場合はここの値を「true」にすればOKです。

ほかにも、speedやtapeOffsetというオプションも用意されています。スクロールのスピード調節は「speed」から設定します。値は「slow」「normal」「fast」のなかから指定可能です。

また、ブラウザ幅を縮小・拡大してみるとわかると思いますが、デモはレスポンシブにも対応しています。

PC、スマホ、タブレットなどいろんなデバイスで見れるテキストの自動スクロールを実装したいという人は、ぜひ「jquery.autoscroll-text-tape」を活用されてみてはいかがでしょうか?

jquery.autoscroll-text-tape

AnimatedSlideNav動きがオシャレなアニメーションのサイドナビゲーション「AnimatedSideNav」前のページ

jQuery依存なしのシンプルなライトボックス機能を実装できる「Lightbox」次のページLightbox

関連記事

  1. Gradientify

    JavaScript

    シンプルなCSSグラデーション変化を実装できる「Gradientify」

    GradientifyはシンプルなCSSグラデーション変化を実装するこ…

  2. Scrolltab

    JavaScript

    スクロール移動させるタブを追加できるjQueryプラグイン「Scrolltab」

    ScrolltabというjQueryプラグインを使えばスクロール移動さ…

  3. kissui.scrollanim

    JavaScript

    スクロールによる多彩なアニメーションを実装できる「kissui.scrollanim」

    kissui.scrollanimは、CSS3を活用したスクロールによ…

  4. iziModal

    JavaScript

    エレガント・レスポンシブ・フレキシブルでそのうえ軽量なモーダルウィンドウ「iziModal」

    iziModalはエレガント・レスポンシブ・フレキシブルなモーダルウィ…

  5. Typewriter JS

    JavaScript

    タイプライターっぽいエフェクトでテキストを表現できる「Typewriter JS」

    Typewriter JSは、タイプライターを使って文字入力するような…

  6. Intense Images

最近の記事

  1. パーソナルパーティション
  2. 200-DGBG020
  3. Anker PowerPort 5-in-1 37.5W Hub

アーカイブ

PAGE TOP