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. Line Maker

    JavaScript

    アニメーションするラインを実装できる「Line Maker」

    Line Makerは、いろんなアニメーションをするラインを実装するこ…

  2. JavaScript

    文字の半分をスタイルすることができるjQueryプラグイン「Splitchar」

    SplitcharというjQueryプラグインを使えば、文字の半分をス…

  3. no-image
  4. no-image
  5. Monthly.js

    JavaScript

    レスポンシブに対応したカレンダーを実装できる「Monthly.js」

    Monthly.jsはレスポンシブに対応したシンプルで美しいカレンダー…

  6. iconate.js

    JavaScript

    アイコンをオシャレにアニメーションしながらtransformさせる「iconate.js」

    iconate.jsはアイコンをアニメーションさせながら別のアイコンへ…

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP