JavaScriptで作るスクロールに合わせたいろいろなアニメーション

以前の投稿でパララックスデザインをご紹介しました。
そちらでも触れましたが、サイトに「ワクワク感」「面白さ」を持たせるとユーザー体験の向上が期待できます。スクロールアニメーションは、企業・ブランドの個性、サイトのストーリー性をより魅力的に表現する手法です。

ここでは、以前ご紹介した以外の、スクロールアニメーションを使ったサンプルをいくつかご紹介したいと思います。

スクロールをJavaScriptで制御する

セクションごとのスクロール

少しのスクロールで、次のセクションまでスルっと移動されます。
スライドのように、区切りをつけてコンテンツを読んでもらいたい時におすすめです。
ただ、自動でストップされるので、好きなところで画面を止めておけず、場合によっては使いにくいと感じるかもしれません。
こちらのサンプルページをご覧ください。

マウスホイールにも対応した横スクロール

「横スクロールの個性的なサイトを作りたい」「沿革や購入の流れ等、一部だけ横スクロールのコンテンツを入れたい」
このように横で展開させたい時に、マウスホイールで縦にも横にも読み進められる仕様にします。
慣れていないユーザーは戸惑うかもしれません。対象ユーザーの年代、属性に合わせて導入を考えたいですね。
こちらのサンプルページをご覧ください。

見ていて心地よいスクロールアニメーション

ここからはスクロールに合わせて要素を動かしていきます。

コンテンツ1

要素に色が重なって消えます。

要素に色が重なって消えます。

コンテンツ2

左側からフェードインします。

右側からフェードインします。

コンテンツ3

拡大しながら表示します

回転しながら表示します

コンテンツ4

スクロールで画像を移動させます。

コンテンツ5

個別の要素にスクロールの量に合わせて、アニメーションをつけています。

コンテンツ6

スクロールの量に合わせて画像を拡大します。

JavaScriptは読み込みに時間がかかるため、使いすぎるとページが重くなります。アピールしたい部分に絞って設計していくことが大切です。

この他、面白いスクロールアニメーションはまだまだ豊富にありますので、次の機会にご紹介できればと思っています。
コンテンツや表示するタイミングに合わせて、適したアニメーションで効果的に情報を伝えていきたいですね。
心地よく理解しやすいサイト、ユーザーにとっての満足度を一緒に追求しませんか?