Currently, I am working on a section featuring a parallax scrolling effect with multiple layers of PNG images.
Check it out here:
As you scroll down the page, you can observe a cool 3D effect.
Users on Chrome, Opera, or Edge browsers may notice a graphical issue at the bottom of the image while scrolling. A rectangular hole appears, partially obstructing the image's bottom. Interestingly, this issue does not occur on Firefox.
The image was crafted using HTML and CSS, with multiple layers created by cutting out components from the original landscape image using Photoshop.
Below is the code used to create the parallax image:
<section
class = "sectionStyle"
>
<header class="header">
<img src={Layer1} alt = "layer1" class ="layer1Style" />
<img src={Layer2} alt = "layer2" class ="layer2Style" />
<img src={Layer3} alt = "layer3" class ="layer3Style" />
<img src={Layer4} alt = "layer4" class ="layer4Style" />
<img src={Layer5} alt = "layer5" class ="layer5Style" />
<h1
class="text-center text-2xl font-bold"
>Welcome!</h1>
</header>
<div class = "bg-black h-fit text-white text-base py-10 ">
<div
class="w-11/12 mx-auto"
>
<p>//written content</p>
//skip
</div>
</div>
</section>
You can find this on the following Github page: https://github.com/Albertyhu/tutorial/blob/main/src/components/parallaxHero.astro
The stylesheet used to style and create the parallax effect is available here:
https://github.com/Albertyhu/tutorial/blob/main/src/styles/parallaxHeroStyle.css
I would greatly appreciate any assistance from those who might have insights into what is causing the rectangular hole to appear at the bottom of the parallax image while scrolling.
Edit: I have also created another page featuring a parallax image, using the same HTML markup and CSS styling as the previous one. Unfortunately, it exhibits the same issue with the rectangular hole when viewed on Chrome, Opera, and Edge:
View it here: