WEBサイトでは、もはや定番化したTOPで重要な情報をフラッシュ的に見せるスライドショー。定番化しているだけに注目をそれだけ引くのは至難の業ですが、今日紹介するのはそんなスライドショーの中でも特異な、様々な表情を見せてくれるスライドショー「Multi-Layout Slideshow」です。

こちらのスライダーはサークル、スクエアなどなど、一つの表現では無く、様々なフォーマットを切り替えてスライドできるスライドショーとなっています。

詳しくは以下

それぞれのフォーマットがただ流れてくるだけでは無く、遷移時のアニメーションもレイアウト毎につくられているようで、作りこまれた印象をあたえることが可能です。一般的なスライダーと実装方法はあまりかわりませんが基本的にはclassとdata-layoutで制御していて、それぞれのフォーマットを当てはめるみたいです。実装についての詳しい方法は「Multi-Layout Slideshow | Codrops」からどうぞ。

ダウンロードは「GitHub – codrops/MultiLayoutSlideshow」から取得可能です。基本的には商用・個人ともに無料で利用できるようになっていますが、ライセンスの詳細については「License」をご覧ください。

Multi-Layout Slideshow | Codrops