no-image

JavaScript

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

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

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

Masked Circle Slider

デモ

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

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

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

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

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

no-imageシンプルな円形のカラーピッカーを実装できる「jQuery-Colorwheel」前のページ

スライダータイプの質問フォーム実装「jquery.formslider」次のページno-image

関連記事

  1. Shave

    JavaScript

    設定した高さに基づいて複数行のテキストを切り取る「Shave」

    Shaveは設定した最大の高さに基づいてHTML要素内に収まるように複…

  2. Animated Image Pieces

    JavaScript

    画像が細かいピースになるアニメーション実装「Animated Image Pieces」

    Animated Image Piecesは、画像が細かいピースに分解…

  3. Toast

    JavaScript

    アニメーション付きでスタッキングしていくメッセージ通知「Toast」

    Toastはアニメーション付きのメッセージ通知を表示することができるj…

  4. jQuery gantt

    JavaScript

    軽量なガントチャートを実装できるjQueryプラグイン「jQuery gantt」

    jQuery ganttは、軽量でシンプルなガントチャートを実装するこ…

  5. Instafeed.js

    JavaScript

    Webサイト内にInstagramの画像を表示できる「Instafeed.js」

    Instafeed.jsはWebサイト内にInstagramの画像一覧…

  6. JavaScript

    360度画像を回転させるjQueryプラグイン10

    画像を360度回転させて見せることができる素敵なjQueryプラグイン…

最近の記事

  1. 東京都現代美術館
  2. スーリア バターチキン
  3. そそそ 明太クリームそうめん
  4. すしざんまい
  5. 蒼龍唐玉堂 特製牛バラ担々麺

アーカイブ

PAGE TOP