How can I create a scrolling image collage for my jewelry website?

[Diarna-Official]

While this may be hard to explain, I will try. I have started a jewellery store, and, on the home page I would like to add a collage. However, when the client scrolls down, one of the images on this collage, move upwards. I cant post a video, however, the idea is of 2 images, one overlapping the other, and as you scroll up or down the overlapping image will shift slightly. I have found an example of this on the following website: https://www.marrowfine.com/. If you scroll down to the bottom, where the website says "Hang with Us..." this is a perfect example of what I would like to achieve. If anyone could help me, I would be very grateful. 

Mathers

[mics]

What you're describing is called a parallax effect, where one layer of images moves at a different speed than the other layer(s), creating an illusion of depth and movement. Here's how you can create a similar effect on your Shopify store's homepage using the Dawn theme:

1. In your Shopify admin, go to Online Store > Themes > Actions > Edit code.

2. Open the index.liquid file in the Templates folder.

3. Find the section where you want to add the parallax effect. You can use the div tag with a specific class to define the section, like this:

   <div class="parallax-section">
   <!-- Your content here -->
   </div>
   
   

4. Add two images to the section, one on top of the other, using the img tag. Set the position of the top image to absolute and the z-index to a higher value than the bottom image, like this:
5. <div class="parallax-section">
   <img src="path/to/bottom/image.jpg" alt="Bottom Image">
   <img src="path/to/top/image.jpg" alt="Top Image" class="parallax-image">
   <!-- Your content here -->
   </div>

CSS

.parallax-section {
position: relative;
height: 600px; /* or adjust the height to your needs */
}

.parallax-section img {
width: 100%;
}

.parallax-section .parallax-image {
position: absolute;
top: 0;
left: 0;
z-index: 2;
transform: translateZ(0);
animation: parallax-scroll 10s infinite;
}

@keyframes parallax-scroll {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(0, -100px, 0);
}
}

The CSS code above sets the position of the bottom image to relative, the position of the top image to absolute, and the z-index of the top image to a higher value than the bottom image. It also applies a transform: translateZ(0) property to the top image to enable hardware acceleration and an animation that moves the image up by 100px over a period of 10 seconds.

1. Adjust the animation values to fit your needs. You can change the transform value to move the top image in any direction, and adjust the duration of the animation using the animation-duration property.

2. Save the file and preview your homepage to see the parallax effect in action. You may need to adjust the image sizes and positions to fit your needs.

1.  

[Diarna-Official]

Thank you so much! I am currently using crave at my theme. Would this mean that the code must change? Also, I do find this quite confusing. Can I simply add a image section, add 2 images, and then edit them so as to do the parallax effect? I just don't really know how to use the img tag. Lastly, is step 3 necessary or simply optional as that also confuses me somewhat? Also, where do I add the CSS section of the code? Is it put directly after step 5? Sorry for all these questions but I really appreciate the information you have given me, so thank you!

[samsawant]

Hello Diarna-official,

I want to achieve the same functionality. Were you able to find a good app or a theme that can do this?