El Noguer » Pàgines web impressionants amb Parallax scrolling

Pàgines web impressionants amb Parallax scrolling

Filed under: Ciència i tecnologia — Joaquim Perez Noguer at 10:17 am on Divendres, agost 22, 2014

Una gran tendència de disseny web del moment és parallax scrolling, que implica el fons es mou a un ritme lent en el primer pla però molt fluid, creant un efecte 3D a desplaçar-se per la pàgina. A vegades pot ser aclaparador, però quan s’usa amb moderació pot proporcionar un element agradable, subtil de profunditat.

Més informació:

Article original a www.creativebloq.com
El tutorial de paralax pro tips for building parallax websites

00. FirefoxOs

01. Alquimia WRG

Example of parallax scrolling websites — Alquimia WRG uses parallax elements to simulate a 3D space environment

02. The Royal British Legion

Example of parallax scrolling websites — The Poppy Appeal site uses illustrations and animations to educate both a young and old audience

03. Nintendo Game Boy

Example of parallax scrolling websites — Play along with parallax scrolling on this Game Boy site

04. Flat design vs Realism

Which side are you on?

05. Sony

This offering from Sony is unlike any parallax scrolling we’ve ever come across to date

06. Costa Coffee

The Graphite Design team chose an illustrative approach for more flexibility

07. Highway One

The weight of the images was the biggest challenge for the dev team

08. Make Your Money Matter

Manage your finances with information and advice from Make Your Money Matter

09. The Beast

The Beast — The folk singer’s site self-scrolls as a poem is read out

10. The Lab

The Lab — This parallax scrolling site is different and instantly engaging

11. Why Your Brain Craves Infographics

infographics — An infographic to end all infographics!

12. 5emegauche

5emegauche — Each page has its own scrolling mechanism

13. Atlantis World’s Fair

Atlantis World’s Fair — The Atlantis World’s Fair use parallax scrolling to tell their story

14. Every last drop

Every Last Drop — Learn about the problems of water conversion through this brilliant parallax scrolling site

15. Seattle Space Needle

Scrambled egg all over my face. What is a boy to do?

16. Golden State of Mind

Golden State of Mind — Golden State of Mind showcases the best of California

17. Living Word

Living Word — UK-based design agency Tribe developed this parallax scrolling site for translation agency Living Word

18. Spotify

Spotify — Spotify employs subtle use of parallax scrolling on its introductory page

19. Madwell

Madwell — New York agency Madwell uses parallax scrolling to add a sense of depth

20. The Jacksonville Downtown Art Walk

The Jacksonville Downtown Art Walk — The Jacksonville Downtown Art Walk site makes scrolling a joy

21. Von Dutch

Von Dutch — Von Dutch’s site tells its story through scrolling

22. Fannabee

Fannabee — Watch the icons as you scroll down the Fannabee page

23. Peugeot Hybrid4

Peugeot — Peugeot uses parallax scrolling to create an auto-playing web comic

24. Cultural Solutions

The circles move at different speeds for a subtle 3D effect

25. jQuery Conference

jQuery conference — Last year’s jQuery conference features some small, subtle parallax scrolling animations

26. Shape

Parallax scrolling adds shape to, er, Shape’s homepage

27. Nintendo

Nintendo uses parallax scrolling to take you through the history of Mario Kart

28. Activate Drinks

Activate Drinks uses parallax scrolling bubbles to add a third dimension

29. The Whitehouse’s Iraq Timeline

The White House uses parallax scrolling to heighten the emotion of its Iraq War timeline

30. Pitchfork Cover Stories

Pitchfork’s ‘Cover Stories’ series has won a host of awards for web design

31. Green Man

YCN Studio took care of the entire Green Man festival rebrand

32. Soleil Noir 2012 | We believe in…

This site was originally designed as a greetings card

33. Oakley

Oakley combines parallax scrolling and striking photography in its latest website for the Airbrake MX goggles

34. Jason Kenny OBE

Bristol-based design agency Fiasco created a vertical scrolling site for Olympic English track cyclist Jason Kenny

35. La Moulade

examples of parallax scrolling — La Moulade features an unusual navigation widget that floats at the top

36. Marmoset

examples of parallax scrolling — Spotify might want to start watching its back with this new music site

37. Walking Dead

Walking Dead — Walking Dead uses parallax scrolling to pull you into its gory world

38. New York Times: Tomato Can Blues

New York Times — A beautiful experience is to be had with this parallax scrolling New York Times article

39. Health Service Payouts

health payouts — This online infographic highlights the problem of health compensation payout culture

40. We are Unfold

We Are Unfold — Clever scrolling works well with a sticky top-right nav menu

41. Savings Challenge

Savings Challenge — The site helps you discover how much you could save on your car

42. Cyclemon

cyclemon — The site features just about every bike type there is

43. Lexus

Lexus — Experience the new Lexus without visiting the showroom on this interactive site

44. Life in my Shoes

Life In My Shoes — The About page features a lively parallax effect

45. Snow Fall

The New York Times’ ‘Snow Fall’ article kickstarted a whole new craze for rich parallax sites

46. The Reykjavik Confessions

Here’s the BBC News take on a Snowfall-style story

Comments (0)

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment