スクロール呼応型アニメーションを取り入れた7つの実例サイト

1. 日本デザインセンター

デザインに関する問題解決を行う日本デザインセンターのホームページでは、エレベーターメニュー付きでさまざまなスクロール呼応型アニメーションを楽しむことができます。
全画面を使ったビデオや、パララックスで浮かび上がる写真など、さまざまなエフェクトをタイミングよく取り入れ、視線を引きつけます。

2. Uber Design

Uber DesignはUberのデザインチームのホームページです。
スクロールでふわりと表示されるコンテンツが印象的ですが、右から、左から、下から現れるといったように、ほんの1秒程度のアニメーションではありますが単調にならない工夫が施されています。

3. Minus 99

Minus 99のホームページも、注目に値する面白いアニメーションが施されています。
プレイスホルダーには、最初は画像が表示されていませんが、スクロールするとボックスの中に画像や動画が表示されます。
スクロールするごとに驚きの連続です。

4. Essential

驚きの新型スマートフォンEssentialのホームページにも、スクロール呼応型のアニメーションが多く取り入れられています。
ページを読み込むとまず最初にEssentialがどんと登場し、スクロールすると中身のパーツが重なるようにして表示されます。
スクロールするたびに、物欲を掻き立てられる、そんなホームページになっています。

5. acure pass

acure passのサイトは、すでに表示されているにもかかわらず、オブジェクトをすうっと動かすことで目を引くという面白い効果が実装されています。
これならユーザビリティやユーザー体験を損なわずにすむという、素晴らしいアイデアです。

6. Base CRM

Base CRMのページはよくあるWebアプリケーションのランディングページになっていますが、左右に分かれてふわりと画像を表示させるので、思わず見てしまいます。
複雑なアニメーションではなくとも、ユーザーの視線を引きつける格好の例でしょう。

7. TaxiNet

TaxiNetのホームページは、かなりインパクトがあります。
スクロールすると、全画面でアニメーションが起こります。
しかし、決して目に障るわけではなく、むしろそのダイナミックさに感銘を受けてしまうでしょう。