no-image

JavaScript

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

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

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

Masked Circle Slider

デモ

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

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

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

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

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

関連記事

  1. TextFit

    JavaScript

    テキストをコンテナ幅にすばやくフィットさせる「TextFit」

    TextFitは、一行または複数行のテキストをコンテナ幅(オプションに…

  2. Bricklayer

    JavaScript

    軽量なグリッドレイアウトを実装できる「Bricklayer」

    Bricklayerは軽量なグリッドレイアウトを実装することができるラ…

  3. cascadingDivs
  4. JavaScript

    スクロールしても固定表示されてついてくるjQueryプラグイン「Sticky」

    StickyというjQueryプラグインを使えば、スクロールしても固定…

  5. PreViewTube.js
  6. Amigo Sorter Plugin

    JavaScript

    タッチ対応で直感的に並べ替えできるjQueryプラグイン「Amigo Sorter Plugin」

    Amigo Sorter Pluginは、タッチ対応で直感的にリスト項…

最近の記事

  1. スタバのドリップのホットのショート
  2. LE エルイー 6 PANEL CAP
  3. タリーズ ハウスブレンド
  4. BAG-TW1BKシリーズ

アーカイブ

PAGE TOP