fullPage.jsがある程度普及したのも要因の一つかと思いますがフルスクリーンでスクロールごとにコンテンツが切り替わるサイトをチラホラ見かけます。
以前はfullPage.jsで組むだけで良かったケースも多かったのですが、最近だともっと動きを出して欲しいという要望をいただくことが多くなりました。
そこで動きの参考になりそうなモノをいくつかピックアップしてみました。
CONTENTS
fullPage.jsをベースにして中の要素に動きを加えたパターン
See the Pen Personal Webpage by Bradley Engelhardt (@SquishyAndroid) on CodePen.
fullPage.jsを使っているのでわりと使いやすいかと。ただスクロールさせるだけではなく、中のコンテンツにも動きを出しているのがポイントです。
左右にセパレートした画面内で画像が切り替わっていくパターン
See the Pen Image Transition On Scroll(GSAP) by Yugam (@pizza3) on CodePen.
使用シーンを選びますが、構成がハマれば目を引くサイトに仕上がりそうです。
スクロールする度に画像が次々と画像が現れるパターン
See the Pen One page scroll with depth effect (?) by Nikolay Talanov (@suez) on CodePen.
先ほどのものと同じく、左右別々の画像が表示されます。こちらの方が臨場感があるのでより訴求力の高いページを作れそうです。
斜めに背景を分断して切り替わるパターン
See the Pen Skewed One Page Scroll by Nikolay Talanov (@suez) on CodePen.
エッジが効いてますね。ブランドサイトや特設サイトなどに使えそうです。動きもそこまでモッサリしてないので気持ちよく見れます。
横スクロールするパターン
See the Pen Full-Screen Slider ( GSAP Timeline ) #3 by Diaco M.Lotfollahi (@MAW) on CodePen.
こちらは横にスクロールさせるタイプで、コンテンツを一つずつ見せたい場合には有効です。
エフェクトのおかげで切り替わった感があります。
1コンテンツごとに丁寧に見せれるパターン
See the Pen Velo Slider – with Borders by Stephen Scaff (@StephenScaff) on CodePen.
先ほどのパターンの縦バージョンという感じです。余白の取り方がうまいので、引き込まれるものがあります。
スクロールではなくスライダー形式のパターン
See the Pen Full-screen slider (JS) with custom effects by Nikolay Talanov (@suez) on CodePen.
画像が変わる際のエフェクトが複数パターンあります。背景画像の分割の仕方が参考になります。
画像が分割してスクロールしていくパターン
See the Pen Cool layout with fancy page transitions and off-canvas menu by Nikolay Talanov (@suez) on CodePen.
とても考えられていてクオリティが高いです。ただFireFoxおよびスマホ対応するには色々いじる必要があります。
直接使うことはなくても動きの参考になるものが多く、見ているだけでも勉強になります。
