JavaScript

画像をボックス単位に分割してスライドさせていくjQueryプラグイン「Maskify Slider」

とてもお洒落なjQueryのイメージスライダーがあったのでご紹介します。画像をボックス単位で分割してスライドさせていくjQueryプラグイン「Maskify Slider」です。分割された画像が順番に表示されていく動きがとても素敵ですね。

[ads_center]

使い方

マージンを使って画像を切り離したり、逆にマージンをなくしたりしても印象が変わりますね。

Maskify Slider

HTMLのマークアップは以下のように記述します。クラス名「sources」の中にスライドさせるオリジナルの画像を入れておきます。circleというクラス名がついた要素が分割される要素です。

<div class="widgets">
    <div class="sources">
        <img src="img.jpg" alt="">
        <img src="img2.jpg" alt="">
        <img src="img3.jpg" alt="">
        <img src="img4.jpg" alt="">
    </div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>

Maskify Sliderをセットします。

$('.widgets').Maskify({
        'canvas': '.circle', // 画像を表示させる要素
        'marginTop': 200, // デフォルト: 0
        'slider': true, // デフォルト: true
        'delay': 7000, // デフォルト: 5000
        'transitionLength': 1000, // デフォルト: 1000
        'cssTransition' : true, // デフォルト: true
        'percentage': true // デフォルト: false
    });

スライダーの動きや見せ方もカスタムしやすそうですね。

関連記事

  1. Expandy Menu

    JavaScript

    マウスオーバーで広がるメニューパネル「Expandy Menu」

    Expandy Menuはマウスオーバーすると横に広がるメニューパネル…

  2. TwentyTwenty

    JavaScript

    2枚の画像を見比べれるjQueryプラグイン「TwentyTwenty」

    TwentyTwentyは2枚の画像を見比べれる便利なjQueryプラ…

  3. Typed.js

    JavaScript

    プログラムを入力するようにタイプするエフェクトを実装できる「Typed.js」

    Typed.jsは、プログラムを入力するように文字をタイプしてくれるエ…

  4. no-image

    JavaScript

    カスタマイズ性の高いjQueryアラート・モーダル・lightboxプラグイン「jAlert」

    jAlertはカスタマイズ性の高いjQueryアラート・モーダル・li…

  5. FModal.JS

    JavaScript

    シンプルなフルスクリーンのモーダルウィンドウ「FModal.JS」

    FModal.JSはシンプルなフルスクリーンのモーダルウィンドウを実装…

  6. Skitter

    JavaScript

    豊富なアニメーションでカスタマイズ性に優れたスライドショーを実装できる「Skitter」

    Skitterは豊富なアニメーションでカスタマイズ性に優れたスライドシ…

コメント

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

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

最近の記事

  1. NIB2600
  2. Anker PowerPort Atom PD 4
  3. USB-2H401BKN
  4. Dyson Pure Cool Me

アーカイブ

PAGE TOP