Parallax scrolling is a web site trend where the background content, ideally an image, is moved at a different speed than the foreground content while scrolling.
The importance of Parallax effect in an eCommerce store
The parallax effect in an eCommerce store, gives a professional look on scroll, it is a great way to add depth and movement to the browsing experience.
Parallax is based on optical illusion. Since the human eye perceives objects that are close to us as larger than things farther away, we perceive distant objects as if they were moving more slowly.
Does parallax slows down the site speed ?
If not coded well , the parallax feature can slow down your website speed, it is also RECOMMENDED to use it only on desktop and not on mobile devices, as some smartphones or tablets won't have the necessary scripts to display it.
Parallax scrolling does not always work on mobile devices, this is why we disabled it on mobile devices on our Shopify themes
- Marouane RHAFLI | Plak Theme C.E.O
The best way to not to "kill" the site speed while using a parallax is by lazyloading the image background, in order to do so, you need either to hire a professional developer or use one of the Plak Theme template that are speed and SEO friendly.
The basic HTML code for parallax effect
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.parallax {
/* The image to use */
background-image: url("img-parallax.jpg");
/* Set a specific height */
min-height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<p>Scroll Up and Down this page to see the parallax scrolling effect.</p>
<div class="parallax"></div>
<div style="height:1000px;background-color:red;font-size:36px">
Scroll Up and Down this page to see the parallax scrolling effect.
This div is just here to enable scrolling.
Tip: Try to remove the background-attachment property to remove the scrolling effect.
</div>
</body>
</html>
Top Shopify themes using speed friendly parallax effects
- Plak
- Grass
- Sly
- Fashion planet
- Wood