SPAなサイトではページ遷移がない分、コンテンツを切り替える時のアニメーションに気を配らないといけません。そうしないとコンテンツの変化が平凡になり、印象が薄れてしまいます。スムーズなスクロールはよくある手法です。 今回紹介するFullScreen Sliderもそんなスクロール用ライブラリです。表示範囲全体をスライドさせる、インパクトあるトランジションが可能です。

FullScreen Sliderの使い方

デモです。

コンテンツが切り替わると右側のマークも位置が変わります。

コンテンツを切り替えているデモです。

スクロールでも変えられます。

ウィンドウ幅を縮めるとバーが横向きになります。コンテンツの切り替わりアニメーションは変わりません。

FullScreen Sliderはコンテンツの切り替わりにアニメーションをつけ、訪問者に印象づけられるようにしています。一つ一つの画面でコンテンツが切り替わるようなサイト構成の時にぴったりでしょう。

FullScreen SliderはCSS製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。

FullScreen Slider ykob/fullscreen-slider: This asset controls sections in a page. It resizes sections to fullscreen resolution and moves these individually by wheel/touch events.