Masked Circle Sliderは、円形のマスクエフェクトが素敵なスライダーを実装できます。画像をスライドする時に、円形に切り抜かれた部分が残るのが特徴です。印象的なアクセントを加えたスライダーを求めている人には最適なスライダーになるのではないでしょうか。
円形に切り抜かれた画像の一部が印象的
以下のページからMasked Circle Sliderの実際のコードやデモをチェックできます。
フル画面でデモ動作を見たい人は以下からどうぞ。
デモでは画像が表示されていて、左から右へ、もしくは右から左へ画像をドラッグするとスライドで隣の画像に切り替えることができます。
画像をスライドする時は現在表示されている画像の一部が円形に切り抜かれた状態でスライドしていきます。そして次の画像が画面中央に配置されようとすると、その円形の部分が次の画像の一部として変化します。最後はスライドしてきた画像とピッタリ重なり1つになる仕組みです。
とても珍しいエフェクトなので、ユーザーにとっては印象に残るスライダーになりそうですね。
実装にはCSSとJavaScriptが使われています。オプションには、arrows、speed、asNavFor、dotsといった項目が用意されています。マークアップもシンプルに記述できるので、手軽に実装できるのがいいですね。
というわけで、マスクエフェクトによる印象的なスライダーを実装できる「Masked Circle Slider」の紹介でした。
