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

no-image

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

Slice Slider

Slice Slider

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

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

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

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

スポンサーリンク

スポンサーリンク

アクセスランキング

Tags

Archives