no-image

JavaScript

マスクエフェクトが素敵なスライダー実装「Masked Circle Slider」

Masked Circle Sliderは、円形のマスクエフェクトが素敵なスライダーを実装できます。画像をスライドする時に、円形に切り抜かれた部分が残るのが特徴です。印象的なアクセントを加えたスライダーを求めている人には最適なスライダーになるのではないでしょうか。

円形に切り抜かれた画像の一部が印象的

Masked Circle Slider

デモ

デモでは画像が表示されていて、左から右へ、もしくは右から左へ画像をドラッグするとスライドで隣の画像に切り替えることができます。

画像をスライドする時は現在表示されている画像の一部が円形に切り抜かれた状態でスライドしていきます。そして次の画像が画面中央に配置されようとすると、その円形の部分が次の画像の一部として変化します。最後はスライドしてきた画像とピッタリ重なり1つになる仕組みです。

とても珍しいエフェクトなので、ユーザーにとっては印象に残るスライダーになりそうですね。

実装にはCSSとJavaScriptが使われています。オプションには、arrows、speed、asNavFor、dotsといった項目が用意されています。マークアップもシンプルに記述できるので、手軽に実装できるのがいいですね。

というわけで、マスクエフェクトによる印象的なスライダーを実装できる「Masked Circle Slider」の紹介でした。

関連記事

  1. jQuery Timespace

    JavaScript

    四方にドラッグ移動できる水平タイムライン実装「jQuery Timespace」

    jQuery Timespaceは上下左右と四方にドラッグ移動できる水…

  2. StellarNav.js

    JavaScript

    レスポンシブで多階層に対応したドロップダウンメニュー「StellarNav.js」

    StellarNav.jsはjQueryによるレスポンシブで多階層に対…

  3. JavaScript

    レイアウトを超簡単に雑誌風に整列してくれるjQuery Masonryの使い方

    jQuery Masonryというプラグインを使えば、ものすごく簡単に…

  4. AnimateScroll

    JavaScript

    面白いエフェクトのページ内スクロールを実装できるjQueryプラグイン「AnimateScroll」…

    ページの任意の場所にスクロールできるjQueryプラグイン「Anima…

  5. JavaScript

    レスポンシブなLightbox風のギャラリーを実装できるjQueryプラグイン「anoFlow」

    anoFlowというjQueryプラグインを使えば、レスポンシブなLi…

  6. no-image

    JavaScript

    画像の遅延読み込みを実装できる軽量ライブラリ「Lazyestload.js」

    Lazyestload.jsは画像の遅延読み込み機能を実装できる軽量の…

最近の記事

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

アーカイブ

PAGE TOP