スクロールアニメーションの参考に!見ていて楽しいアニメーションサイトまとめ

スクロールアニメーションはフロントエンドでしょっちゅう使われる技術ですが、今回は見ているだけで楽しめるスクロールアニメーションサイトをいくつかまとめてみました。

かなり参考になるサイトもあります。楽しんでみてください。

 

The Scrolling Marathon

http://scrollingmarathon.ca/

名前の通り、画面スクロールでマラソンをするというサイトです。

スクロールした分だけ距離が増え、まさにWeb上でマラソンを体感している感じです。

ずっとやっていると指が痛くなってきますが、斬新で面白いページだと思います。

 

Melville

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

文字と写真のパララックスをふんだんに取り入れたサイトです。

上下に少しスクロールするとわかりますが、画像が表示された後微妙にスクロールに合わせて画像も上下に移動しています。

細かいところまで手が込んでいて、かつ大胆なパララックスで、お手本にしたいくらいのサイトですね。

 

The Boat

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

揺れるボートに乗っている設定で様々なスクロール効果が出現します。

画面がガタッと大きく傾くのは初めて見るとなかなか衝撃的です。こんなに面白いサイトが作れるのかと。

ストーリーやサウンドも用意されているので、読み物としても楽しめます。

自動でスクロールするボタンも付いているのでユーザー想いのサイトでもあります。このサイトマジですげぇ。

 

Femme Fatale Studio

http://www.femmefatale.paris/en

スクロールで背景画像と文字が連動して動きます。

イージングはタメが効いていて、非常にメリハリのあるアニメーションがクセになります。文字がバラバラに動くのとかみていて楽しいです。

スクロールで移動する距離が大体決まっているというのもポイントです。これで制作者側も意図した通りのアニメーションをユーザー側に見せることができています。

 

Valaire: Oobopopop

http://valaire.mu/

スクロールによるパララックスはもちろん、横にスクロールする箇所もあります。どこかの音楽アプリ的なものを連想させますね。

全体が派手に動くのでそちらに目が行きがちですが、よくみてみると細かい部分までよく作られています。

背景画像や色もどんどん変化し、「もっと見たい!」と思ってしまいます。

縦スクロールで横にスクロールする。すげぇですね…

 

まとめ

見ているだけで楽しいスクロールアニメーションサイトを紹介しました。

スクロールアニメーションといっても色々な種類があるのがお分かり頂けたと思います。

ユーザーを楽しませるつもりで色々なアニメーションに挑戦してみると面白いですね!