EndlessRiver

JavaScript

エンドレスに流れていくコンテンツスライダー「EndlessRiver」

EndlessRiverはエンドレスに流れていくコンテンツスライダーを実装できるjQueryプラグインです。滑らかにコンテンツを流すことができます。コンテンツにマウスオーバーでストップさせるといったことも可能です。

EndlessRiver

デモ

デモではテキストが横スクロールでエンドレスに流れています。テキストにホバーするとアニメーションがストップします。

また、play/stopボタンも設置されており、それをクリックすることでアニメーションを開始したり停止したりすることが可能です。

  • speed
  • pause
  • buttons

各デフォルトの値は、speedが100、pauseがtrue、buttonsがfalseに設定されています。

webページ内でテキストが滑らかにアニメーションしていれば、思わず注目してしまいますね。ユーザーの目を引かせたい時やちょっとしたアクセントにアニメーションが欲しい時などに活用してみてはいかがでしょうか。

というわけで、エンドレスに流れていくjQueryコンテンツスライダー「EndlessRiver」のご紹介でした。

EndlessRiver

ResponsifyJS画像で見せたいエリアを保持しながらレスポンシブにできる「ResponsifyJS」前のページ

多彩なフレームが魅力的!複数の写真を1枚にまとめれるiPhoneアプリ「PicFrame」次のページPicFrame

関連記事

  1. Building a Vertical Timeline With CSS and a Touch of JavaScript
  2. no-image

    JavaScript

    シンプルなドロップダウンメニューを実装できるjQueryプラグイン「snakeMenu」

    snakeMenuはシンプルなアニメーションによるドロップダウンメニュ…

  3. swingdrag

    JavaScript

    jQuery UIのドラッグ機能にスイング効果を加えることができる「swingdrag」

    swingdragは、jQuery UIのドラッグ機能にスイング効果を…

  4. Swipeshow

    JavaScript

    スワイプにも対応したシンプルなスライドショーを実装できるjQueryプラグイン「Swipeshow」…

    タッチデバイスのスワイプにも対応したシンプルなスライドショーを実装する…

  5. jQuery Autocompleter

    JavaScript

    カスタマイズ性に優れたサジェスト機能を実装できる「jQuery Autocompleter」

    jQuery Autocompleterはカスタマイズ性に優れたサジェ…

  6. ResponsifyJS

    JavaScript

    画像で見せたいエリアを保持しながらレスポンシブにできる「ResponsifyJS」

    ResponsifyJSは画像のなかで見せたいエリアを保持させながらレ…

最近の記事

  1. Apple WatchでのMacロック解除を無効
  2. オータムスイートポテトフラペチーノ
  3. 紅葉
  4. ナノケア EH-NA0E
  5. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP