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. Timeline.js

    JavaScript

    スライド式のタイムラインを実装できるjQueryプラグイン「Timeline.js」

    Timeline.jsは、スライド式によるタイムラインを実装することが…

  2. jQuery Responsive Tabs
  3. Yamm 3

    JavaScript

    メガメニューをBootstrap3で実装する「Yamm 3」

    Yamm 3はメガメニューをBootstrap3を使って実装することが…

  4. jLetter

    JavaScript

    テキストを散らばせながら次々と表示させることができるjQueryプラグイン「jLetter」

    シンプルでちょっと目を引かせたいところなんかによさそうだったので使って…

  5. JQuery Clock

    JavaScript

    シンプルなアナログ時計を実装できる「JQuery Clock」

    JQuery Clockはシンプルなアナログ時計を実装できます。画像を…

  6. Alton

    JavaScript

    コンテンツごとに縦スクロールでナビゲートできるjQueryプラグイン「Alton」

    Altonはコンテンツごとに縦スクロールすることによりWebページをナ…

コメント

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

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

最近の記事

  1. CAR-HLD12BK
  2. OWL-LPB6701LA
  3. cheero Power Mountain mini 30000mAh CHE-110

アーカイブ

PAGE TOP