I have a unique concept I want to experiment with, but I'm unsure of the best approach to take.
My idea involves centering content on the screen and instead of having it scroll off and new content scroll in, I would like it to stay centered and smoothly transition into the next content.
For example, when the user scrolls to "Content 1," it locks that content in the center of the screen. As the user continues to scroll, "Content 1" fades into "Content 2," creating a seamless transition effect. When the user scrolls past "Content 3," the scrolling behavior returns to normal.
I'm looking to achieve this using vanilla JS and CSS, ensuring that it works smoothly on both mobile (touch) and desktop (wheel) devices.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<p>Normal scrolling content</p>
<div class="min-h-screen flex justify-center content-center items-center">
<h2>Content 1</h2>
</div>
<div class="min-h-screen flex justify-center content-center items-center">
<h2>Content 2</h2>
</div>
<div class="min-h-screen flex justify-center content-center items-center">
<h2>Content 3</h2>
</div>
<p>Rest of the normal scrolling content</p>