JavaScriptで作るスクロールに合わせたいろいろなアニメーション
以前の投稿でパララックスデザインをご紹介しました。
そちらでも触れましたが、サイトに「ワクワク感」「面白さ」を持たせるとユーザー体験の向上が期待できます。スクロールアニメーションは、企業・ブランドの個性、サイトのストーリー性をより魅力的に表現する手法です。
ここでは、以前ご紹介した以外の、スクロールアニメーションを使ったサンプルをいくつかご紹介したいと思います。
スクロールをJavaScriptで制御する
セクションごとのスクロール
少しのスクロールで、次のセクションまでスルっと移動されます。
スライドのように、区切りをつけてコンテンツを読んでもらいたい時におすすめです。
ただ、自動でストップされるので、好きなところで画面を止めておけず、場合によっては使いにくいと感じるかもしれません。
こちらのサンプルページをご覧ください。
マウスホイールにも対応した横スクロール
「横スクロールの個性的なサイトを作りたい」「沿革や購入の流れ等、一部だけ横スクロールのコンテンツを入れたい」
このように横で展開させたい時に、マウスホイールで縦にも横にも読み進められる仕様にします。
慣れていないユーザーは戸惑うかもしれません。対象ユーザーの年代、属性に合わせて導入を考えたいですね。
こちらのサンプルページをご覧ください。
見ていて心地よいスクロールアニメーション
ここからはスクロールに合わせて要素を動かしていきます。
コンテンツ1
要素に色が重なって消えます。
要素に色が重なって消えます。
コンテンツ2
左側からフェードインします。
右側からフェードインします。
コンテンツ3
拡大しながら表示します
回転しながら表示します
コンテンツ4
スクロールで画像を移動させます。
コンテンツ5
個別の要素にスクロールの量に合わせて、アニメーションをつけています。
コンテンツ6
スクロールの量に合わせて画像を拡大します。
JavaScriptは読み込みに時間がかかるため、使いすぎるとページが重くなります。アピールしたい部分に絞って設計していくことが大切です。
この他、面白いスクロールアニメーションはまだまだ豊富にありますので、次の機会にご紹介できればと思っています。
コンテンツや表示するタイミングに合わせて、適したアニメーションで効果的に情報を伝えていきたいですね。
心地よく理解しやすいサイト、ユーザーにとっての満足度を一緒に追求しませんか?
無料相談
