Hover Carousel

JavaScript

超軽量なホバーカルーセルを実装できる「Hover Carousel」

Hover Carouselは超軽量なホバーで動作するカルーセルを実装することができます。カルーセルに設置された画像にマウスオーバーすることで、左右への移動を可能にしているのが特徴です。容量がとても軽量なところがいいですね。

Hover Carousel

デモ

デモではサムネイル画像がいくつか横に並んでおり、マウスオーバーすることで画像リストを左右にスライド移動できるようになっています。

ホバー中は、画像リストの下部にナビゲーションバーも表示されるので、自分がいまどのあたりの位置にいるのかを瞬時に把握することができます。

シンプルですが、ファイル容量も軽いのでサクサク動作するのがいいですね。ちょっとしたカルーセルタイプの画像ギャラリーをサクッと自サイトに実装したいなんてときに活用してみてはいかがでしょうか?

というわけで、以上、超軽量なホバーによるカルーセルを実装することができる「Hover Carousel」のご紹介でした。

Hover Carousel

Background Blur画像をボカしてくれるクロスブラウザ対応の「Background Blur」前のページ

ホバーによるチルトエフェクトを実装できる「Tilt Hover Effects」次のページTilt Hover Effects

関連記事

  1. no-image

    JavaScript

    スマホなどに最適なテーブルを実装できる「Mobile-Friendly Table」

    Mobile-Friendly Tableはスマホなどのモバイルに最適…

  2. Pagination.js

    JavaScript

    シンプルでさまざまなカスタマイズが可能な「Pagination.js」

    Pagination.jsはシンプルでさまざまなカスタマイズが可能なペ…

  3. markerPen

    JavaScript

    Webページにマーカー機能を実装できるjQueryプラグイン「markerPen」

    markerPenはWebページにマーカーで描ける機能を実装することが…

  4. Filterable Product Grid
  5. Yet Another Ripple Plugin
  6. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryで要素を挿入できるメソッドがたくさんあるので整理してみた

    jQueryでHTML要素を追加するメソッドが色々あるので整理するため…

最近の記事

  1. 芳醇な香りのラムレーズンサンド
  2. Aモーニングセット
  3. 白トリュフの塩パンやメロンパンなど
  4. 東京都現代美術館
  5. スーリア バターチキン

アーカイブ

PAGE TOP