快感!スクロールアニメーションまとめ

ザワ


快感!スクロールアニメーションまとめ

こんにちは! 野菜をこよなく愛する肉食系フロントエンドのザワです。

みなさん、良いスクロールライフを過ごしてますか?
今回は、ずっとスクロールしていたい! そう思わせてくれる、フィーリンGoodなスクロールアニメーションを集めてみました。

▼目次

Femme Fatale Studio

Femme Fatale Studio http://www.femmefatale.paris/en

少しマウスをコロコロすると、タイポと背景画像がアニメーションします。タイポはそれぞれのタイミングで動き始めますが、背景と同じタイミングで一連のアニメーションを終了します。快感ポイントはズバリ、タメの効いたイージングですね。「んぬ〜ん、スッ」、気持ち良いイージングはつい口ずさみたくなりますね。

Valaire: Oobopopop

Valaire: Oobopopop http://valaire.mu/

スクロールを続けていくと、縦に、時には横に、そして縦に、画面が展開されていきます。背景色がじんわり変わったり、横展開のカバーフローが現れたりと、セクションを移るごとに新しい体験があなたを待っています。
アーティストのアルバムをカバーフローで見せているセクションでは、横に画面が動いていくのですが、文字と写真をしっかりとパララックスで見せています。全体が派手に動いていくことに着目しがちですが、細部まで気を遣っていることにリスペクトですね。

The Scrolling Marathon

The Scrolling Marathon http://scrollingmarathon.ca/

タイトルの文字通り、スクロールでマラソンをしようというサイトです。
フルマラソンを走りきったことがある強靭な精神力の持ち主なら、最後に何が待ち受けているのか、体験することが出来るかもしれません。私は1km地点くらいで肩に痛みを覚えて挫折しました。1つの演出方法に特化すると、独特な印象に思えますね。是非、挑戦してみてください。

Melville

Melville http://www.melville-design.com/

パララックスをスクロールの演出に取り入れているサイトはよく見かけますが、このサイトは気持ち良いと感覚的に思うことができます。私が感じた快感ポイントは、写真のエリアの演出です。写真の枠組みと写真自体のスピードをコントロールしてズレを表現しているのですが、これがなんとも心地よい。心地よいのです。

The Boat

The Boat http://www.sbs.com.au/theboat/

読み物としての体裁を保ちつつ、スクロールによって様々な効果が出現してきます。ユーザーがスクロールする量が多いことを考慮して、自動スクロールをオプションで用意されているのもユーザーとして嬉しいですね。静止画をアニメーションさせると安っぽくなりがちなのですが、動きのある背景や画面をダイナミックに揺らすなどの工夫があり、見ていて飽きません。素敵です。

まとめ

スクロールアニメーションと一口に言っても、サイトの性質によって、取り入れる演出が違ってきますよね。

ウェブサイトにとってスクロールとは、ユーザーが当たり前に行うアクションですが、そこに少しアクセントを置くことで、ユーザーに楽しんでもらえたら嬉しいですね。いつもの通勤コースに、いつもと違うお花が咲いていたら、素敵ですよね。

それでは、良い制作ライフを!

ザワ
この記事を書いた人
ザワ

フロントエンドエンジニア

関連記事