The Scrolling & Parallax Effect
Amy Valentine, Web Designer, NZ
The Scrolling Site
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.
With the scrolling site however, content is no longer constrained to the height of the screen, instead it overflows vertically and must be scrolled.
Up until not that long ago, most browsers fell into a rather narrow array of sizes. You could design a site for a 800x600 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.
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 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.
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.
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.
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.
Quiroz.co – Geno Quiroz uses Divi on his website and his blog posts are a rich source of custom CSS snippets and Divi tutorials.
DiviSoup.com – By Michelle Nunan, creator of the Divi Academy, Divi Club Membership and Divi Tutorials.
BeSuperfly.com – By Nathan Duvall, Divi child themes, plugins & layouts
Take your WordPress website to the next level
Get a free no-obligation quote today!