FrameScrub

JavaScript

iPhotoのようにマウスオーバーで画像が切り替わっていくjQueryプラグイン「FrameScrub」

FrameScrubというjQueryプラグインを使えば、マウスオーバーでカーソルを動かす度に画像が切り替わっていきます。iPhotoのサムネイル画像のような動きに近いですね。マウスイベントで画像を切り替えていく機能を実装したい時に覚えておきたいプラグインです。

[ads_center]

FrameScrubの使い方

FrameScrub

FrameScrub

実際のデモもあるので、気になる方はチェックしてみて下さい。マウスを置く位置によって違う画像が表示されるので、触っていておもしろいですね。

以下のようにFrameScrubを呼び出します。

$("#sample").frameScrub({
    defaultImage: 'firstImage',
    verticalAlignment: 'middle',
    showTitles: 'false',
});

HTMLは以下のような感じでマークアップしていきます。分かりやすくていいですね。最初に表示させたい画像にはidにfirstImageをつけてあげます。

<div id="sample" style="width:100%;height:300px;overflow:hidden;">
    <img src="images/img1.jpg" />
    <img src="images/img2.jpg" />
    <img src="images/img3.jpg" id="firstImage" />
    <img src="images/img4.jpg" />
    <!-- 中略 -->
</div>

というわけで、マウスを動かして画像を切り替わるようにしたい時に試してみてはいかがでしょうか。

明るさ自動調整を解除する方法Macのディスプレイ画面の明るさ自動調整を解除する方法前のページ

曲線上にテキストを配置できるjQueryプラグイン「CurvedText」次のページCurvedText

関連記事

  1. Create a month picker jQuery plugin
  2. universal-tilt.js

    JavaScript

    パララックスなど多彩なチルト効果を実装できる「universal-tilt.js」

    universal-tilt.jsはパララックスやスケールなど多彩なチ…

  3. Audero Smoke Effect

    JavaScript

    スモーク(煙)のエフェクトを実装できるjQueryプラグイン「Audero Smoke Effect…

    スモーク(煙)のエフェクトを実装することができるjQueryプラグイン…

  4. roll.js

    JavaScript

    スクロールによるページネーション、進捗度、ポジションなどの値を取得できる「roll.js」

    roll.jsはスクロールによるページネーション、進捗度、ポジションな…

  5. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでオブジェクトの型を取得して判定などをしたい場合はjQuery.type()を使う

    jQuery.type(obj)を使えばオブジェクトの型を知ることがで…

  6. TyperText

    JavaScript

    テキストタイピングエフェクトを実装できる「TyperText」

    TyperTextはテキストタイピングエフェクトを実装できるjQuer…

最近の記事

  1. Anker PowerExpand 8-in-1 USB-C PD 10Gbps データ ハブ
  2. SAP-001
  3. OWL-QI10W2Q18W
  4. アースクーラー3WAY

アーカイブ

PAGE TOP