no-image

JavaScript

画面が半分に割れながら切り替わる縦型スライドショー「Split Slick Slideshow」

Split Slick Slideshowは、画面が真ん中から半分に割れながら切り替わる縦型のスライドショーを実装できます。ダイナミックなアニメーションで切り替わるスライドショーを求めている人にはピッタリですね。CSSとJSで構築されています。

ナビゲーションからも操作可能

デモ

デモでは画面いっぱいに広がった風景画像が表示されていて、上下にスクロールすることで次の画像に切り替えることができます。画像が半分に割れながら切り替わっていくアニメーションはとても迫力がありますね。

また、右側にはナビゲーションも設置されています。横になった線がコンテンツの数だけあり、現在開かれているコンテンツの横線が他のものより長く伸びるようになっています。

ちなみにこのナビゲーションからでも画像の切り替えが可能です。

JSのコード内を見るとわかりますが、swipe、vertical、arrows、infinite、speed、cssEaseといったオプションによるセッティングもできるみたいですね。

Split Slick Slideshow

countdownCube3Dキューブのように回転するカウントダウンタイマーを実装できる「countdownCube」前のページ

WAI ARIAを活用したユーザーフレンドリーなツールチップ実装「ARIA TOOLTIP」次のページARIA TOOLTIP

関連記事

  1. stickyNavbar.js
  2. ViewBox

    JavaScript

    レスポンシブに対応したLightbox風のイメージギャラリー「ViewBox」

    ViewBoxはレスポンシブに対応したLightbox風のイメージギャ…

  3. Sticky Sidebar

    JavaScript

    スマートでハイパフォーマンスな追尾型サイドバー実装「Sticky Sidebar」

    Sticky Sidebarは、スマートでハイパフォーマンスな追尾型サ…

  4. jQuery.Flexdatalist

    JavaScript

    テキスト入力候補を表示させれる「jQuery.Flexdatalist」

    jQuery.Flexdatalistはテキスト入力候補を表示させるこ…

  5. ZooMove

    JavaScript

    マウスオーバーで画像を拡大ズーム・移動もできるjQueryプラグイン「ZooMove」

    ZooMoveは、マウスオーバーで指定された画像やエリアをズームするこ…

  6. Changing Background Color while scrolling

最近の記事

  1. TR153
  2. cheero Flat 10000mAh with Power Delivery 18W CHE-112
  3. SV-S251
  4. スラウェシ トラジャ

アーカイブ

PAGE TOP