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. no-image
  2. MediumLightbox

    JavaScript

    Mediumライクな画像ズームを実装できる「MediumLightbox」

    シンプルでエレガントな画像ズーム機能をwebサイトに実装できる「Med…

  3. intence

    JavaScript

    インタラクティブなナビゲーションスクロールバーのJSライブラリ「intence」

    intenceはスクロール中のエリアが分かるインタラクティブなナビゲー…

  4. 2013年上半期jQueryプラグインまとめ

    JavaScript

    2013年上半期に紹介したjQueryプラグイン50選まとめ

    気づいたらあっという間に2013年上半期が終わってしまいましたね。とい…

  5. Recursive Hover Nav
  6. no-image

    JavaScript

    さまざまなデバイスに対応したパララックスを実装できる「PARALLAX」

    PARALLAXは、さまざまなデバイスに対応したシンプルなパララックス…

コメント

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

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

最近の記事

  1. Soundcore Ace A1
  2. cheero USB-C PD Charger 60W
  3. DY-S01
  4. OWL-QI10W04

アーカイブ

PAGE TOP