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. JavaScript

    Google マップを簡単でシンプルに使えるようにしてくれる「gmaps.js」

    Google マップをとても簡単に扱えるようにしてくれるgmaps.j…

  2. Popper.js

    JavaScript

    軽量で見やすいツールチップを実装できる「Popper.js」

    Popper.jsはユーザーにとって見やすいツールチップを実装できるJ…

  3. no-image

    JavaScript

    手軽にパララックス効果を実装できるシンプル・軽量な「simpleParallax」

    simpleParallaxは、手軽にパララックス効果を画像に実装する…

  4. jQuery LoadingOverlay

    JavaScript

    多彩なローディング画面を実装できる「jQuery LoadingOverlay」

    jQuery LoadingOverlayは、カスタマイズ性に優れた多…

  5. Naver

    JavaScript

    シンプルですごくいい!レスポンシブに合うナビゲーションのjQueryプラグイン「Naver」

    NaverというjQueryプラグインがすごくシンプルでよかったのでご…

  6. Slideout.js

    JavaScript

    軽量でタッチスライド対応のサイドメニュー・Slideout.js

    Slideout.jsは軽量でスマフォでのタッチスライドに対応したサイ…

コメント

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

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

最近の記事

  1. NIVEA MEN CREME
  2. チャイラテ
  3. ベーコンエッグアボカドトーストとゆずジンジャーアップル
  4. COMOLI ナッピングウールショーツ
  5. 川上庵(麻布十番)牡蠣天せいろ
PAGE TOP