First and foremost, thank you for taking the time to review my question.
I am currently developing a website and I need to implement a vertical image transition effect within a selected division, similar to a parallax effect. Within this div, there are 3 images that need to transition seamlessly.
Within the div, there are 3 distinct images as seen in the screenshots below:
This is the first image. All three images are half the width of the screen.
https://i.sstatic.net/a1e7Q.png
Next, we have the second image:
https://i.sstatic.net/wOyts.png
Lastly, there is a third image where the yellow content on the right side remains static while only the images change vertically. Currently, I have included a simple scroll bar for navigation.
I am looking to incorporate either a parallax scrolling effect or a quick image transition on mouse scroll for these images.
An example of the parallax effect I wish to achieve can be found here:
Alternatively, I am considering implementing this effect: https://codepen.io/RenanB/pen/GZeBNg
<div class="block">
<img src="https://unsplash.it/1920/1920/?image=1005" data-speed="-1" class="img-parallax">
<h2>Parallax Speed -1</h2>
</div>
... // other code blocks shown above
However, the challenge lies in that when I apply the same code to my images, the effect activates throughout the entire site instead of just with the targeted images.
Most importantly, regardless of where the user is scrolled on the page, I want them to encounter these 3 images before continuing to the next section. While I have attempted to use the parallax code provided, it seems to affect the site as a whole rather than working only within the specified div.
What would be the most effective way to apply the two methods mentioned above to my website?