JavaScript

画像にマウスオーバーするとズームして綺麗にエフェクトがかかるjQueryプラグイン「Swish」

画像にマウスオーバーをするとズームして綺麗なオーバーレイのエフェクトがかかるjQueryプラグイン「Swish」をご紹介します。イメージギャラリーのサイトなどに活用したいですね。虫メガネのアイコンも表示されるので、クリックして拡大サイズの画像を見ることができるというニュアンスも伝わりやすいかと思います。以下、使い方です。

[ads_center]

使い方

jQueryとプラグインファイルを読み込み、Swishをセットします。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script type="text/javascript" src="hover.zoom.js"></script>
<script>
$(function() {
    // 画像01
    $('#blue').hoverZoom();

    // 画像02
    $('#green').hoverZoom({
        overlay: true,
        overlayColor: '#90bd2e',
        overlayOpacity: 0.7,
        zoom: 50,
        speed: 800
    });

    // 画像03
    $('#pink').hoverZoom({
        overlayColor: '#bd2e75',
        zoom: 0
    });
});
</script>

続いて、HTMLです。

<!-- 画像01 -->
<div>
    <a href="#" class="zoom" id="blue"><img src="images/img01.jpg" alt="画像01" /></a>
</div>

<!-- 画像02 -->
<div>
    <a href="#" class="zoom" id="green"><img src="images/img02.jpg" alt="画像02" /></a>
</div>

<!-- 画像03 -->
<div>
    <a href="#" class="zoom" id="pink"><img src="images/img03.jpg" alt="画像03" /></a>
</div>

CSSも記述しておきます。widthとheightは画像のサイズを指定しておきます。

.zoom {
    width:300px;
    height:185px;
    display:block;
    position:relative;
    overflow:hidden;
    border:1px solid #ddd;
    background:#fff url(images/loader.gif) no-repeat center;
}
.zoom img {
    display:none
}
.zoomOverlay {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    display:none;
    background-image:url(images/zoom.png);
    background-repeat:no-repeat;
    background-position:center;
}

オプションでは、オーバーレイの色や透明度、他にもどのくらい拡大するかや拡大時のスピードなどを指定することができます。以下はデフォルト値のオプションです。

$('デフォルト').hoverZoom({
    overlay: true, // オーバーレイをするかどうか
    overlayColor: '#2e9dbd', // オーバーレイの色
    overlayOpacity: 0.7, // オーバーレイの透明度
    zoom: 25, // どのくらいズームするか
    speed: 300 // ズーム時のスピード
});

シンプルでわかりやすいですね。こんな感じで、とても簡単にお洒落なホバーエフェクトをかけることができます。ということで、Swishの使い方についてでした。

以下からダウンロードできます。

iPhone版Chromeアプリで自動で飛ばされるスマホ専用ページをPCページで表示させるやり方前のページ

iPhone5のイヤホンジャックとLightningコネクタのゴミやホコリを防いでくれる「ポートキャップセット for iPhone5(ブラック)[SP582]」次のページ

関連記事

  1. Responsive 3d Fold Scroll
  2. Responsive Nav

    JavaScript

    レスポンシブ対応の軽量なナビゲーションを実装できる「Responsive Nav」

    レスポンシブ対応のナビゲーションを実装できる「Responsive N…

  3. jquery.mark

    JavaScript

    キーワードをハイライトしてくれる「jquery.mark」

    jquery.markはキーワードをハイライトしてくれるjQueryプ…

  4. flipLightBox
  5. Smooth Anchor Scrolling

    JavaScript

    ページ内リンクをスクロールできる「Smooth Anchor Scrolling」

    ページ内リンクをスムーズにスクロールできる「Smooth Anchor…

  6. no-image

    JavaScript

    SVGによるドーナッツ状(円形)のチャートを実装できる「donutty」

    donuttyはSVGによるドーナッツ状(円形)のチャートを実装できる…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. RF85mm F2 MACRO IS STM
  2. Anker PowerWave Pad Alloy
  3. Anker Bolder LC30
  4. BG-R10

アーカイブ

PAGE TOP