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
    });

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

柔らかくて質感がいい!首や腰をサポートしてくれるラテックスのトラベルネックピロー前のページ

見た目もシンプルでレスポンシブ対応のナビゲーションメニューを実装できるjQueryプラグイン「FlexNav」次のページFlexNav

関連記事

  1. Bootstrap Mobile FullScreen Modal
  2. Raindrops.js

    JavaScript

    水面に雨粒が落ちてくるエフェクトが素敵なjQueryプラグイン「Raindrops.js」

    Raindrops.jsは水面に雨粒が落ちてくる素敵なエフェクトを実装…

  3. MoveTo

    JavaScript

    軽量なスムーススクロールを実装できるJSライブラリ「MoveTo」

    MoveToは軽量(圧縮版で1KBほど)なスムーススクロールを実装する…

  4. JavaScript

    1つのテキストリンクから複数のリンク先が表示される「μllinx」

    μllinx(mullinx)は1つのテキストリンクから複数のリンク先…

  5. Linear Slider

    JavaScript

    シンプルな機能で使いやすいjQueryによる水平スライダー「Linear Slider」

    Linear Sliderはシンプルな機能性による水平スライダーを実装…

  6. Solution for Long Drop Down Items

    JavaScript

    長いメニューもスクロールで表示できる「Solution for Long Drop Down Ite…

    長いドロップダウンメニューでもスクロール表示してくれるjQueryを活…

コメント

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

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

最近の記事

  1. スタバ ドリップコーヒー
  2. エチオピア
  3. 紗々 飴色和栗
  4. DCG-CA21
  5. Apple WatchでのMacロック解除を無効

アーカイブ

PAGE TOP