artchatterblog

CSUEB Electronic Art Seniors share their thoughts!

Archive for the tag “website”

Parallax Scrolling Websites

I love parallax scrolling websites and wanted to share some details here.

Parallax Scrolling is one of the latest trends in web design. The trend began with the very first parallax website for Nike “Nike Better World” in 2011. It is growing in popularity across the internet, bringing the user experience to a new interactive level of online viewing. Parallax scrolling has taken hold as the new frontier of user experience as it provides engaging visuals.

Parallax Scrolling was originally created for the video game industry as a “special effects” technique to give the audience an illusion of depth.

In parallax scrolling websites, the background moves at a slower rate compared to the foreground, creating a 3D effect as you scroll down the page for an impressive visual effect that allows for countless creative applications for online storytelling and create the illusion of depth. Parallax design gives websites a great opportunity to:

  • Impress viewers with page depth and animation
  • Make users stay longer by engaging the visitors to scroll through the entire page.
  • Provoke curiosity
  • Direct visitors to calls to action

A few more things to keep in mind when you’re designing a parallax website are:

  •    Keep it simple, don’t overdo it.
  •    Use it to tell a visual story
  •    Make it fun and engaging with depth using layering
  •    Emphasize calls to action when directing the visitor through the site
  •    Plan and target the browsers and mobile browsing

You could create a parallax website through pure JavaScript or CSS. However, it is better to use a library for easier implementation on an existing project. Here are 3 libraries you should check out first.

Some of my favorite parallax sites:

Advertisements

Post Navigation