Web Design Trend #13 • Innovative Scrolling
and Parallax

Zazzle Media, by Jamie Leeson

Scrolling, once reserved for getting from top of a page to the bottom, is being used in more creative capacities to deliver content online. Where designers in the past were concerned about keeping the most important content ‘above the fold’, we’re seeing this old-fashioned notion disappear, as ‘the fold’ is now harder to define, as users are viewing content of screens of all different sizes and resolutions.

Scrolling is a versatile mechanic which (when executed well) can work great with all varieties of content delivery. It works with video based content, where large full screen videos play and pause as the user scrolls, as well as static content, which can animate, move, or change depending on the users input.

Scroll - Apple 3
Apple is a high profile brand making great use of scroll within their site (see above). Keeping the all important product descriptions static on the left, a series of watches cascade on scroll creating beautiful, seamless transitions throughout the page.

It’s a mechanic which has many applications, but if abused, or executed badly can be disastrous to usability. However, as with most developments, we expect that as more designers experiment and gain feedback from users, it’ll be something which gets better and better, adding more functionality and additional levels of interaction.

Parallax

The site for Epicurrence, an annual US snowboarding event (pictured above) makes great use of Parallax, achieving a user experience which is fluid, engaging and that jumps off the page.

We’re also seeing changes in how Parallax is being implemented online, as more brands implement it within their builds to give their sites an extra level of polish. Parallax is essentially a scrolling mechanic which gives a 3d effect as the foreground moves at a faster pace than the background behind it. It’s a great visual tool, which when used well, gives a sense of depth, lifting elements off the screen and creating a sense of dynamism.

For those interested in implementing parallax, we’d recommend checking out Parallax.js, a handy jQuery plug-in for quickly creating impressive parallax effects.

Our prediction: With content creation happening at a far greater pace than ever seen before, and companies finding more innovative solutions for delivering their content to users, we expect the clever use of scroll and parallax effects to be something implemented more and more.

Several high profile companies are starting to implement Parallax within their builds. The usage of some are more subtle than others, but we expect to see the trend develop further in 2017, as brands and designers across the globe tinker with it to suit their own content and purposes.

WordPress Video Lightbox