The upward trend of scrolling down - parallax & one pagers
(June 5, 2013)

Not all websites have the general appeal of Facebook or the content of Mashable, most are sites simply someone trying to promote something. As web designers, frequently we’re trying to take a small amount of information and render it engaging and different. Many designers have been searching for the equivalent of a Flash-based site. One with a lot of control on the designer end… sadly often, not so much for the user. HTML5 is ready to take its place at the table. 

One pager websites with Parallax Scrolling

Parallax scrolling comes to the rescue giving a different browsing experience. It allows some elements or “section” panels, layers if you will, to move at different speeds and directions than others. Visual tricks like making it appear that the page is scrolling diagonally, or having a 3D effect

Most often though, we see one section overlapping another, thus creating a real visual separator, or landmark if you will, that the user can retain as an indicator of where they are on the site.

The thing is that we all love a good story and these sites really can tell a story when done right. We love to be drawn into a site. It can be a simple story too.

Some parallax scrolls change the scrolling direction from north south, to east west, which is a perfect physical mental model for taking that particular tangent or following that topic.


This nike microsite is really fun and a great example of what can be done.

The other benefit of course is that this is still new and fun so there are plenty of engagement benefits that render these pages sticky.  They do draw us in and hold our attention. We do want to see what’s coming next. They build beautiful mini brand experiences. That’s why we like these sites.

Here’s an example of a marketing campaign site we recently worked on for the Laurentian Bank.


They work best with minimal text content and large images or illustrations. They are ideal for microsites and marketing campaigns. They’re not made to replace most a full brand experience or to deal with very much content. With too much text content, the experience is deminished.   

Here’s one example where some parallax was applied (along with some cool matrix3D JS)  while keeping a standard site structure and navigational elements intact.

Blog post currently doesn't have any comments.