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. JavaScript

    レスポンシブ対応で画像やテキストも自由にスライドできるjQueryスライダー「Responsly.j…

    スマホにも対応したレスポンシブのjQueryスライダー「Respons…

  2. JavaScript

    画像の一部をカッコよく拡大したりできるjQueryプラグイン「Loupe」

    こうゆうプラグインは初めて使ってみたんですが、とても面白いですね。Lo…

  3. ReadRemaining.js

    JavaScript

    記事を読むのにかかる時間を教えてくれるjQueryプラグイン「ReadRemaining.js」

    ReadRemaining.jsは記事を読むのにどのくらい時間がかかる…

  4. photowall

    JavaScript

    Google画像検索のようにサムネイル画像をクリックするとスライド表示されるjQueryプラグイン「…

    Google画像検索のようなアニメーションを実装することができるjQu…

  5. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでアニメーションを遅らせるにはdelayを使えばいいらしい

    ちょっとしたメモです。jQueryでanimateをメソッドチェーンで…

  6. Footnoted

    JavaScript

    脚注(注釈)を入れたい時に役立つjQueryプラグイン「Footnoted」

    FootnotedというjQueryプラグインは文章の中に脚注(注釈)…

最近の記事

  1. 冬用のふとん
  2. 田沢湖
  3. ゴムの耳栓
  4. ライオンコーヒー(バニラマカダミア)
PAGE TOP