How To Create a Parallax Scrolling Effect in Shopify
Parallax scrolling is a web site trend where the background content (i.e. an image) is moved at a different speed than the foreground content while scrolling. This article will guide you how to add a parallax scrolling to a section on your Shopify store.
Step 1: Upload background image
Firstly, you must upload the image to make the background. You go to Settings > Files and you can upload the photo here.
Step 2: Add CSS code
You open the Themes page of the Shopify admin, then click on the Actions drop-down and select Edit code. After that you open the CSS or SCSS file in the Assets folder and add the below code:
1 2 3 4 5 6 7 8 9 | .hura-parallax{ background-image:url(//cdn.shopify.com/s/files/1/0015/7417/4755/t/1/assets/home-bg-1.jpg) background-repeat: no-repeat; background-position-x: center; background-position-y: center; background-size: cover; background-attachment: fixed; display: block; } |
Step 3: Apply Parallax Scrolling Effect to a section
To add parallax scrolling effect to an exist section, you only need put the section in the div container <div class="hura-parallax"></div>
.
1 2 3 | <div class="hura-parallax"> <!--- SECTION CODE ---> </div> |
This is only a basic guide. In fact, you may adjust something to make sure it’s working fine with your Shopify store.
Happy coding!