no-image

JavaScript

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

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

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

デモ

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

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

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

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

Split Slick Slideshow

関連記事

  1. FitText

    JavaScript

    テキストサイズをブラウザ幅の大きさに自動で合わせてくれるjQueryプラグイン「FitText」

    可変するブラウザ幅にテキストサイズを自動で合わせてくれるjQueryプ…

  2. slideSpeed

    JavaScript

    スライドアップ・ダウンを設定された速度で制御できる「slideSpeed」

    slideSpeedは、特定の要素のスライドアップ・スライドダウンを設…

  3. MediumLightbox

    JavaScript

    Mediumライクな画像ズームを実装できる「MediumLightbox」

    シンプルでエレガントな画像ズーム機能をwebサイトに実装できる「Med…

  4. 10のjQueryスニペット

    JavaScript

    Webデザイナーが知っておくべき10のjQueryスニペット

    すべてのWebデザイナーが知っておくべき10のjQueryスニペットが…

  5. ScrollTrigger

    JavaScript

    スクロールの位置をベースにしたアニメーション「ScrollTrigger」

    ScrollTriggerはユーザーがスクロールする位置をベースにした…

  6. Parallax Slider with jQuery

最近の記事

  1. F7U070bt
  2. 生きている玄米と玄米酵素ブレンド雑穀
  3. BOOST↑CHARGE Apple Watch用モバイルバッテリー

アーカイブ

PAGE TOP