no-image

JavaScript

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

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

Slice Slider

Slice Slider

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

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

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

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

関連記事

  1. Warp drive jQuery plugin
  2. Spring Loaders

    JavaScript

    ポリゴンによるローディングアニメーションがかっこいい「Spring Loaders」

    Spring Loadersはポリゴンでつくられたローディングアニメー…

  3. JavaScript

    ナビゲーションをレスポンシブデザインにしてくれるjQueryプラグイン「HorizontalNav」…

    覚えておくと便利そうだったのでメモがてらエントリーします。リスト化した…

  4. no-image

    JavaScript

    タッチフレンドリーでモバイルでも快適に動作する「simplelightbox」

    simplelightboxはレスポンシブ対応でタッチフレンドリーなl…

  5. no-image

    JavaScript

    シンプルなイメージカルーセルを実装できる「Boishakh carousel」

    Boishakh carouselはシンプルなイメージカルーセルを実装…

  6. jQuery Context Menu

    JavaScript

    軽量でシンプルなコンテキストメニューを実装できる「jQuery Context Menu」

    jQuery Context Menuは、軽量でシンプルなコンテキスト…

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP