The Scrolling & Parallax Effect

Amy Valentine

Amy Valentine, Web Designer, NZ

The Scrolling Site

If you observe the landscape of the web today you will notice that the scrolling site has become the new norm for dynamic and editorial content. But more than that, a slew of new and improved web technologies have emerged in the last few years which have allowed scrolling sites to be not just functional, but also cool. Faster javascript compiling and more powerful and flexible CSS have allowed developers to exploit the structure of the scrolling site, and to inject new life into it, creating a sort of scrolling site on steroids.

One of the fundamentals of the modern scrolling sites is the ability to take advantage of the scroll event. One of the ways this can be used is to trigger various outcomes. This could be initializing an animation, playing an embedded full-screen video, or activating a CSS effect.

But let’s take a moment to define the difference between fullscreen and scrolling sites.

The fullscreen site is designed to display all content above the fold. The fold, in the world of web design, is the bottom of the screen. In a way, this layout is similar to that of traditional print, like a book or a magazine the content is laid out in a fixed area, and transitions of some sort are needed to navigate the content of the site.

Fullscreen Web Design

With the scrolling site however, content is no longer constrained to the height of the screen, instead it overflows vertically and must be scrolled.

Scrolling Web Design


Up until not that long ago, most browsers fell into a rather narrow array of sizes. You could design a site for a 800×600 monitor, and be relatively sure it would look the same across most desktop/laptop computers. Today, this is no longer the case. The range of browser sizes has exploded, from the very small to the obscenely wide.

Responsive Web Design

As any web developer will tell you, it’s all well and good to code a pixel perfect fullscreen site given a fixed browser size, but as soon as that browser width and height start moving around, it can quickly become a nightmare to make sure content look good across the board. The scrolling site, by stacking content vertically and allowing the site to have a variable height, largely eliminates this problem.

The Parallax Effect

One big web design trend of the moment is parallax scrolling, which involves the background moving at a slower rate to the foreground, creating a 3D effect as you scroll down the page. When different layers on a page are moved at different speeds, this nifty tricks creates a sense of depth that can be very effective. It can sometimes be overwhelming, but when used sparingly it can provide a nice, subtle element of depth.

Snowfall Scrolling Parallax Site

Snowfall is the latest buzzword to hit the world of design, drawing on the best traditions of editorial layout and combining them with the exciting possibilities offered by multimedia, including parallax scrolling and web video.

The term is named after The New York Times ‘Snow Fall’ article, about the horror of an avalance at Tunnel Creek, which was published online in December 2012. The newspaper presented the Pulitzer-winning article in an innovative way that grabbed the design community’s attention worldwide.


Oakley Parallax Scrolling Site

Eyewear retailer Oakley has triumphed with this website, crafted for the new Airbrake MX goggle,which combines a cool scrolling effect with striking photography that portrays the product beautifully.

Scrolling sites are great at telling stories because they allow an uninterrupted flow of content. But there’s nothing more intimidating and discouraging than a long page of text. But combine that text with imagery, animations and interactivity and you can create a truly compelling experience.

NASA Parallax Site

The NASA project is a highly interactive and engaging scrolling site, with lots fun animated SVG graphics.

It took some time for scrolling sites to become the staple that they are today, but the widespread adoption of smart-phones and the explosion of dynamic content on the web created a need for a new way to browse. And since we are visual animals, we quickly come up with ways of bringing this content to life in engaging and beautiful new ways.

Sources: &

More Resources

Divi Tutorials – by the team at Elegant Themes – this should be your first go-to resource for learning how to use Divi.

Divi Video Tutorials – by Elegant Themes. Perfect for a quick overview of each module, plus lots more video tutorials. – Geno Quiroz uses Divi on his website and his blog posts are a rich source of custom CSS snippets and Divi tutorials. – By Michelle Nunan, creator of the Divi Academy, Divi Club Membership and Divi Tutorials. – By Nathan Duvall, Divi child themes, plugins & layouts



Submit a Comment

Your email address will not be published. Required fields are marked *


Take your WordPress website to the next level

Get a free no-obligation quote today!