Split Slick Slideshowは、画面が真ん中から半分に割れながら切り替わる縦型のスライドショーを実装できます。ダイナミックなアニメーションで切り替わるスライドショーを求めている人にはピッタリですね。CSSとJSで構築されています。
ナビゲーションからも操作可能
以下のページから実際のデモ動作をチェックできます。
デモでは画面いっぱいに広がった風景画像が表示されていて、上下にスクロールすることで次の画像に切り替えることができます。画像が半分に割れながら切り替わっていくアニメーションはとても迫力がありますね。
また、右側にはナビゲーションも設置されています。横になった線がコンテンツの数だけあり、現在開かれているコンテンツの横線が他のものより長く伸びるようになっています。
ちなみにこのナビゲーションからでも画像の切り替えが可能です。
JSのコード内を見るとわかりますが、swipe、vertical、arrows、infinite、speed、cssEaseといったオプションによるセッティングもできるみたいですね。
印象強いアニメーションでありながらも、実装がシンプルというのはうれしいポイントになるかと思います。ダイナミックな縦型スライドショーを実装したい人は、ぜひ「Split Slick Slideshow」をチェックしてみてください。
