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

    JavaScript

    テーブルにソート(並べ替え)機能を実装できる「tsorter」

    tsorterは、JavaScriptを用いてHTMLテーブルにソート…

  2. jQuery.sdFilterMe

    JavaScript

    コンテンツを並べ替えれるフィルタリング機能の実装「jQuery.sdFilterMe」

    jQuery.sdFilterMeは、ポートフォリオ、記事、ギャラリー…

  3. Simple Easy Slider

    JavaScript

    美しいフェードスライダーを実装できるjQueryプラグイン「Simple Easy Slider」

    Simple Easy Sliderは美しいフェードアニメーションによ…

  4. slideSpeed

    JavaScript

    スライドアップ・ダウンを設定された速度で制御できる「slideSpeed」

    slideSpeedは、特定の要素のスライドアップ・スライドダウンを設…

  5. Shuffle Letters

    JavaScript

    テキストをカシャカシャとシャッフルさせて表示していくjQueryプラグイン「Shuffle Lett…

    テキストをカシャカシャとシャッフルさせて表示していくjQueryプラグ…

  6. JavaScript

    色んなメニューやコンテンツをモーダルウィンドウで実装できるjQueryプラグイン「Pop Easy」…

    お洒落で可愛らしいjQueryプラグインを見つけたのでご紹介します。ロ…

コメント

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

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

最近の記事

  1. レンズペン3 ミニプロとレンズペン ELITE マイクロプロ
  2. カメラマングローブ Grip Hot Shot III
  3. 包(つつむ)巾着ポーチ
  4. KMC-80BK

Instagram始めました

Facebookページ

PAGE TOP