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

    JavaScript

    軽量なスムーススクロールを実装できるJSライブラリ「MoveTo」

    MoveToは軽量(圧縮版で1KBほど)なスムーススクロールを実装する…

  2. Stacked Strips

    JavaScript

    スタックしながらスクロールできるエフェクト実装「Stacked Strips」

    Stacked StripsはWebページをスクロールする時に、スタッ…

  3. Animated Image Pieces

    JavaScript

    画像が細かいピースになるアニメーション実装「Animated Image Pieces」

    Animated Image Piecesは、画像が細かいピースに分解…

  4. Light-Zoom

    JavaScript

    CSSを使用した画像ズームを実装できるjQueryプラグイン「Light-Zoom」

    Light-Zoomは純粋なCSSを使用した画像ズーム(拡大)機能を実…

  5. xGallerify

    JavaScript

    サイズが異なる画像でもキレイに表示できるギャラリー実装「xGallerify」

    xGallerifyはギャラリーを作成するのに最適なjQueryプラグ…

  6. Slight Submenu

最近の記事

  1. Apple WatchでのMacロック解除を無効
  2. オータムスイートポテトフラペチーノ
  3. 紅葉
  4. ナノケア EH-NA0E
  5. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP