Here is part 1 of our favorite creative parallax website designs.

01. A-dam

Very stylish [underwear]! This site was created by Build in Amsterdam. Parallax elements popping up as you scroll.

02. Myriad

A brilliant way to showcase office working spaces. Bareface launched this site with inspiring furniture.

03. Firewatch

Here’s a on CodePen of how the layering with the trees effect is achieved.

Enjoyed this post? Don’t forget to check out our Blog for more!… Read the rest

You’ve read our two previous posts on the upsides and downsides of parallax scrolling. Now here are some creative solutions and general tips when designing a parallax website:

• Don’t overdo it. Simplify your site.
• Tell a visual story, avoiding too much text
• Make it fun and engaging
• Create depth with layering
• Emphasize calls-to-action
• Consider older browsers and mobile browsing

Best examples:

Wildlife: Great example of visual storytelling!

A website that’s like a movie

Enjoyed this post? Don’t forget to check out our Blog!… Read the rest

Now that you’ve learned the benefits of parallax design, let’s talk about the downsides. The majority of parallax websites only have a single long page, which can damage a site’s SEO and load speed. These are the cons of parallax-scrollable websites:

• SEO can be damaged
• Websites with a single page can only have:
  • 1 meta
  • 1 header tag
  • 1 URL
• Too many images can cause slow load times

• Frustrated visitors will simply leave the page because of the slow speed
• Not responsive
• Not compatible with most mobile devices

Enjoyed this post? Check out more from our Blog. And while you’re at it, read our post on the solutions to these parallax design negatives.… Read the rest

So, what is parallax scrolling? It is currently growing in popularity on the Internet, and is a new form of user experience that interacts with the website visitor. Parallax scrolling has been called  the “new frontier of user experience”.

“Parallax” is a term first coined visual 2D effect of side scrolling on video games. These used different background image movement speeds so that there was an illusion of depth during gameplay. The background of the game would move slower than the foreground, making it seem further away. In parallax site design, the same concept applies — the background of the website moves at a different speed as the rest of the page, creating an impressive visual effect synonymous with online storytelling.

Parallax design:

• Creates page-depth
• Allows for animation
• Guides visitors with a storytelling approach
• Encourages visitors to scroll through the entire page and stay on the website longer

Enjoyed this post? Don’t forget to check out our Blog.… Read the rest