How to make a Scroll snap align effect
Hi! i'm trying to make it so when you scroll on the page, like this: https://curly.qodeinteractive.com/elementor/split-slider/
I've looked at this page to make it work: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type
But i seem to be doing something wrong. I make my website using wordpress so can't really show code
Curly
Split Slider
scroll-snap-type - CSS: Cascading Style Sheets | MDN
The scroll-snap-type CSS property sets how strictly snap points are enforced on the scroll container in case there is one.
6 Replies
I've also heard that it is UX based bad overall so maybe I won't implement it afterall. But at the end of the day, 've learned something new 🙂
I'm no expert at reverse engineering this kinda stuff, but it looks to me like they might be using this WP plugin: https://www.sliderrevolution.com/
This effect seems to be using css positioning instead of
scroll-snap-type, which is how they got the bidirectional thing going on. There's a relatively positioned container with the class mkdf-vertical-split-slider that contains a left and right children, as well as overflow: hidden. The left and right elements are positioned absolutely, with the left container at the top left of the parent, and the right container is positioned with right: 1 and its top property negative, so it is overflowing above the parent container. Each time you scroll, the left container's top property decreases (becoming negative since it starts at 0), and the right container's top property decreases (approaching 0). This creates the effect of the left container scrolling somewhat normally, and the right container scrolling in reverse.
I'm not 100% sure what the best way of implementing this is, maybe an event listener on scroll? I think it only scrolls a certain amount of pixels each based on the height of the parent container, which is how it "snaps" to each position. I'm very far from an expert on any of this, so a lot of what I'm saying could be wrong, but hopefully this can nudge you in the right direction? Sorry if this is really unclear 😅Slider Revolution
More than just a WordPress Slider
Slider Revolution is more than just a WordPress slider. It helps beginner-and mid-level designers WOW their clients with pro-level visuals.
Also found this on that plugin's site, haven't read it in depth since I know nothing about wordpress, but the effect seems pretty similar: https://www.sliderrevolution.com/design/split-screen-layout-with-slider-revolution/
Slider Revolution
How to Design an Engaging Split Screen Layout with Slider Revolutio...
Want to wow visitors to your website with something unexpected? Learn how to turn the most important sections of your website into a split screen layout.
It really depends it's not always bad UX if done right.
There is also
https://codepen.io/GreenSock/pen/YzygYvM
GreenSock
CodePen
Horizontal snapping sections (simple) - ScrollTrigger
Horizontal snapping sections...
And for a slider https://codepen.io/GreenSock/pen/GRJwLNP