デザイン

デザイン

スクロールにパララックス効果を使用する上でインスピレーションを与えてくれるサイト例15選!

1,928 views

読了時間 : 約1分12秒

パララックス・スクローリングはWebページ全体の「ストーリー」を一貫してビジターに提示し、またサイト内でビジターをそのストーリーに沿ってガイドする上できわめて適した手法と言えます。

ときにページのローディングに時間を要したり、そのためパワフルなマシンが必要なこともあったりと、良いことばかりではありませんが、適切に機能しさえすれば、ユーザのサイト閲覧欲を効果的に刺激してくれるのがパララックス効果です。

本記事では、パララックスエフェクトを効果的に使用するためにインスピレーションを与えてくれるようなサイトを15集めています。

ぜひ、参考にしてみてください。

 

なお、基礎的なパララックスエフェクトをCSSで作る方法については、以下の記事を参照してください。

CSSで作る!シンプルで効果的なパララックス・スクロールエフェクトの作り方【チュートリアル】

 

Beatbox Academy

Beatbox Academy animated parallax css scrolling

 

Erős Balázs

Erős Balázs personal animated parallax css scrolling

Le Tour de France

Le Tour de France animated css parallax scrolling

Cyclemon

Cyclemon animated parallax css scrolling

 

Scroll For Your Health

Scroll For Your Health animated parallax css scrolling

TCM Summer Under the Stars

TCM Summer Under the Stars movie animated css parallax scrolling

numéro10

numéro10 animated parallax css scrolling

NASA: Prospect

NASA: Prospect animated parallax css scrolling

aBenção – Malhas e Tricots Criativos

aBenção - Malhas e Tricots Criativos animated css parallax scrolling

 

De Might of Mister Miller

De Might of Mister Miller animated parallax css scrolling

Negative Space

Negative Space animated css parallax scrolling

 

The Avalanche at Tunnel Creek

The Avalanche at Tunnel Creek animated css parallax scrolling

Flandria

Flandria animated parallax css scrolling

InfoQuest Infographic

InfoQuest Infographic animated css parallax scrolling

 

Fillet

Fillet animated css parallax scrolling

 

 

以下の記事もおすすめです。

【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ

 

 

※本記事は、25 Inspiring Examples of the Parallax Scrolling Effectを翻訳・再構成したものです。

おすすめ新着記事

おすすめタグ