no-image

JavaScript

サラッとスライスで切り替わるスライダー実装「Slice Slider」

Slice Sliderはサラッとスライスでシンプルに切り替わるスライダーを実装できます。さりげなく、気品を感じさせるスライスアニメーションによるスライダーを設置したい人には最適ですね。

Slice Slider

Slice Slider

デモではスライダーの画面内で上下にスクロールすると前後のコンテンツに切り替わります。もしくはスライダーの右側に設置された「Prev」「Next」をクリックすることでも切り替えることが可能です。

切り替わり時のアニメーションでは、メイン画像が少し縮小(後退)した後に上からスライドで次の画像が表示されます。その後、元のサイズに戻る仕組みです。また、画像が切り替わる時にはスライダーのコンテンツ内のテキストも切り替わります。

シンプルながらも細部の動きやタイミングまでしっかり考えられて設計されている印象ですね。セッティングに関しては、delta、currentSlideIndex、scrollThreshold、slides、numSlidesといった設定が可能です。

さりげないスライドアニメーションでかっこいいスライダーを実装したい人は、ぜひ「Slice Slider」をチェックしてみてください。

no-image華やかなレターアニメーションを実装できる「Decorative Letter Animations」前のページ

セレクトボックスをシンプルに見やすくしてくれる「jQuery Styled Select Box」次のページno-image

最近の記事

  1. ホワイトチョコマカダミアドーナツ
  2. エッグペペ
  3. ダークチョコレート
  4. 朝のコーヒー
  5. ザンビア
PAGE TOP