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. Albe Timeline

    JavaScript

    JSONデータを用いたタイムライン実装「Albe Timeline」

    Albe TimelineはJSONデータを用いたカスタマイズ性の高い…

  2. characterCounter

    JavaScript

    文字数のカウントや制限ができるjQueryプラグイン「characterCounter」

    characterCounterは文字数をカウントしてくれるシンプルな…

  3. jquery-backToTop

    JavaScript

    カスタマイズ性に優れたトップへ戻るボタンを実装できる「jquery-backToTop」

    jquery-backToTopはカスタマイズ性に優れた「トップへ戻る…

  4. jQuery Pretty Dropdowns
  5. Emergence.js

    JavaScript

    ブラウザで要素の可視性を検出する「Emergence.js」

    Emergence.jsは、ブラウザで要素の可視性を検出することができ…

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP