Hover Carousel

JavaScript

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

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

Hover Carousel

デモ

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

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

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

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

Hover Carousel

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

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

関連記事

  1. Chocolat

    JavaScript

    レスポンシブ対応のシンプルなLightbox風のjQueryプラグイン「Chocolat」

    Chocolatはレスポンシブに対応したシンプルでスタイリッシュなLi…

  2. no-image
  3. makefixed.js

    JavaScript

    スクロール中に要素を固定配置できるjQueryプラグイン「makefixed.js」

    makefixed.jsはスクロール中に指定した要素を固定配置させるこ…

  4. jBox

    JavaScript

    ツールチップやモーダルウィンドウなどを実装できるjQueryプラグイン「jBox」

    jBoxはカスタマイズ性に優れたツールチップ、モーダルウィンドウ、通知…

  5. no-image

    JavaScript

    jQueryとCSS3を使った縦型アコーディオン「Accordion-menu」

    Accordion-menuは、jQueryとCSS3を使ったシンプル…

  6. Raindrops.js

    JavaScript

    水面に雨粒が落ちてくるエフェクトが素敵なjQueryプラグイン「Raindrops.js」

    Raindrops.jsは水面に雨粒が落ちてくる素敵なエフェクトを実装…

最近の記事

  1. 有栖川公園
  2. グーディオ オーガニックチョコレート(ミント)
  3. チキンバターマサラとシュリンプバターマサラ
  4. 恵比寿のダ・ミケーレのピザ
  5. ハムエッグホットサンドとドリップコーヒー

アーカイブ

PAGE TOP