After completing my first webpage, I implemented a parallax/split scroll effect using ScrollMagic.js.
However, when testing the page in mobile view using Chrome's developer tools, I noticed that the parallax effect was not working properly due to misaligned triggers.
In search of a solution, I stumbled upon a helpful thread on Stack Overflow discussing Parallax scrolling not working on mobile css. The consensus was that parallaxes often struggle on mobile devices, and it is advised to disable the effect once a certain viewport size is reached.
You can see an example of this issue in action on my CodePen here: https://codepen.io/Jaderianne/pen/jjgWpv. As you resize the browser window, you'll notice that the text in the parallax section becomes cramped, indicating the need to disable the effect on smaller screens.
Being new to web development and still learning, I am unsure of how to implement the necessary changes to disable the parallax on smaller screens. I believe I will need to use CSS @media queries, but I'm uncertain about the specifics.
If anyone could offer guidance or assistance, I would greatly appreciate it. You can find the code snippet on my linked CodePen for reference.
Here is a snippet from the HTML:
<section id="About" class="about">
<div class="about-title">
<h2>About Us</h2>
</div>
<div class="about-pages">
<div>
<h2>About 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi,
soluta ipsam, minima delectus eaque omnis!</p>
</div>
<div>
<h2>About 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi,
soluta ipsam, minima delectus eaque omnis!</p>
</div>
<div>
<h2>About 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi,
soluta ipsam, minima delectus eaque omnis!</p>
</div>
</div>
</section>
The corresponding CSS and Javascript can be viewed on the provided CodePen link.
Javascript:
function splitScroll() {
const controller = new ScrollMagic.Controller();
new ScrollMagic.Scene({
duration: '200%',
triggerElement: '.about-title',
triggerHook: 0
})
.setPin('.about-title')
.addTo(controller)
new ScrollMagic.Scene({
duration: '200%',
triggerElement: '.services-title',
triggerHook: 0
})
.setPin('.services-title')
.addTo(controller)
}
splitScroll();
I aim to have the "About 1," "About 2," and "About 3" sections appear directly beneath the "About Us" section (and vice versa for the Services section) when viewed on a mobile device.