Toll Free: 1-877-695-7388

GTA: (647) 699-2838

Search Engine People
  • SEO
  • SEM
  • CRO
  • Display
  • Blog
  • Why Us
  • Contact
  • Join Our Team
  • Get A Quote

Toll Free: 1-877-695-7388

GTA: (647) 699-2838

Parallax Scroll vs. Infinite Scroll

John Medina | May 30th, 2014
Tweet31
Share12
Share
Pin1
44 Shares

While these phrases are affiliated and sometimes mistakenly interchanged, they are not the same thing. One is a design convention while the other is a content delivery method. Although they are often used together in website construction, neither is a requisite of the other. A site can have either parallax or infinite scrolling, or both. These concepts are relatively new to the industry, but their conventions, or lack thereof, have been a challenge for UX and SEO.

The Parallax Effect

So what exactly is "parallax"? No, it's not a comic book super-villain (though some might consider it villainous nonetheless).

The term refers to a visual effect that involves moving two or more superimposed layers, where objects in the foreground are faster and larger than those in the background.

It was originally used to simulate depth of field in movies and gaming, and it eventually found its way into web design. The good news is that, despite having to work around some best-practice implementations, parallax doesn't have to be a bad guy.

Not everything has to move up or down as the user scrolls on a parallax page. You can still have key elements stay put even as everything else disappears from view. Pages don't even have to scroll at all, as seen on France's SNCF Engineering Challenge (just skip the video). Even on a feature-rich site, you can still maintain conversion points and keep the quality of user experience high.

A Bottomless Page

In an "infinite scroll" build, a site's content is delivered in a seemingly never-ending fashion, as though everything was put on a single page. The page itself isn't really bottomless, just very long. This type of architecture can be built literally, as in a true "one-page" site. Alternatively, a continuous scroll can be simulated using JavaScript or AJAX.

Scripts can be used to load an infinite scroll's subsections on-demand or all at once. The text and imagery for each area are taken from actual pages, be they static files or entries in a CMS. Grabbing everything in one go allows for quick traversal when moving down the site, but it requires initial loading time and can even cause a browser performance hit if the content is heavy on imagery. Getting content on the fly - usually based on scroll position - is easier on browser processing and removes the delay on first-load but sacrifices speedy perusal thereafter.

Axara fashion shows a fine example of infinite scrolling, complete with well-defined page states, minimal transition effects, good in-browser performance, and sticky navigation.

A Few Other Things To Keep In Mind

  • Build the site with optimization first in mind, and ensure that each page still has its own URL and remains accessible even if JavaScript were to be disabled. Then, decide how you want to implement these extra features.
  • Be wary of the limits to optimizing a parallax site, and employ best practices for infinite scrolling.
  • Have a mobile version of your parallax site. The processing power required to render the effects would be too much for the majority of phone and tablet browsers. In many cases, the site might not even display properly.
  • Paginate the subsections in a single-page construct, and provide means of navigating quickly to each without forcing the user to trudge all the way down or back up.
  • The overall layout of individual areas in an endless page (with or without a parallax) doesn't have to change. Place conversion points where you normally would in relation to the rest of the "page".

Jquery Tools To Get Started With Parallax Scrolling

as suggested by Nigel Ayow

Stellar.js

  • http://markdalgleish.com/projects/stellar.js/

clip_image002

Superscrollorama

  • http://johnpolacek.github.io/superscrollorama/

clip_image004

Scrolldeck

  • http://johnpolacek.github.io/scrolldeck.js/

clip_image006

Tweet31
Share12
Share
Pin1
44 Shares
Posted in Web DesignTagged infinite, parallax, scroll, Web Design

Recent Posts

  • Maximizing Your E-Commerce Sales:
    A CRO Audit Guide
  • Movin’ On Up! Why Migrating to Google Analytics 4 (GA4) Should be a Priority
  • A Year in Review: The Digital Marketing Trends That Defined 2021
  • The Basics of Video Marketing
  • Just How Much Do Google Reviews Impact Your SEO Ranking?

Categories

  • Analytics & ROI Analysis
  • Company News
  • Content
  • Conversion Optimization
  • CRO
  • Display Advertising/RTB
  • Email Marketing
  • En Español
  • En Français
  • Inbound Marketing
  • Lead Nurture & Marketing Automation
  • Local Search
  • Marketing
  • Mobile
  • Partnership Marketing
  • PPC
  • PR
  • SEO
  • Social Media Marketing
  • Web Design

Additional Posts

Keyword Expansion Strategy

Quick and Dirty SEM Account Audit Basics

May 29th, 2014 | by Anthony Contoleon

Google Instant for Keyword Research

May 29th, 2014 | by Nick Supapol
High Position Brand SERPS - Google

The Top 5 Off-Page Optimisation Factors

May 28th, 2014 | by Chris Ainsworth

LET'S TALK

Need more information or want to get in touch?

Get in touch!
  • SEO
  • SEM
  • Display
  • Blog
  • Why Us
  • Join Our Team
  • Contact Us
  • Local SEO
  • Small Business SEO
  • Enterprise SEO
  • International SEO

LOCATION

1305 Pickering Parkway,
5th Floor Pickering, L1V 3P2

PHONE

Toll Free: 1-877-695-7388
Greater Toronto Area: (647) 699-2838

Social

© Search Engine People Inc. 2023 – Canada’s Top Digital Agency
© SEP 2023 – A Search Engine People Company | Privacy Policy

Search Engine People