Chakrya Lim's Parallax Research

Parallax Research

Parallax scrolling is a trendy effect for websites where the background content, usually a picture, is moving “at a different speed than the foreground content while scrolling” (w3schools.com). It first used in the 1980’s for 8 bit video games (Lee).

To create this effect, “use a container element and add a background image to the container with a specific height. Then use the background-attachment: fixed to create the actual parallax effect. The other background properties are used to center and scale the image perfectly,” see w3school.com’s code below (w3schools.com).

Though this is a beautiful effect, there are some considerations to think about before creating an entire website with it. If using parallax scrolling for an entire website, it’s usually on one url, which can drop your website’s SEO. “Having content spread across more pages give your site more search engine visibility” (Cao).

There are work arounds to prevent the drop in a website’s SEO. First, use parallax scrolling in smaller parts of your page, like when you need to tell a smaller story. Second, use jQuery to break into sections for the search engines. Finally, “optimize around one keyword. It’s never a bad idea to target a single keyword in your H1 header and body paragraph” (Cao).

Parallax scrolling uses a lot of JavaScript, which can slow down when loading up a website, which isn’t mobile friendly. Putting all the content on one page doesn’t help load the page any quicker. In a usability study done by The Journal of Usability Studies, there is no benefit from using a website with parallax scrolls, it’s just more fun on a website and it isn’t the best choice for a website that requires the user to complete a task (think online shopping), however, it’s great if the website is trying to tell a “visual narrative” (Cao).