How can I make this sticky section, with reverse column scrolling effect

Hello, guys. Over the past few days, I've been attempting to reproduce a particular video effect, but with no success. I'm really eager to find out if this can be achieved with CSS only (although I'm quite certain it's not possible). If Vanilla JS is necessary, could you please outline the steps to accomplish it? Unfortunately, the original poster was unwilling to share the URL, making it impossible for me to examine the code. I did, however, come across a similar effect on CodePen, but my JavaScript skills aren't quite up to par to fully comprehend the jQuery used.
4 Replies
MarkBoots
MarkBoots13mo ago
not in the opportunity right now to find out how it is done (surely with js), but for who want's to dive into it, I did find the url https://damac-casa.ae/en#location i do see they are using gsap, so probably look at that without using gsap I came up with this. https://codepen.io/MarkBoots/pen/oNmYeae It's not yet perfect though, because this only reacts on mousewheel scroll. Lots more have to be done to make it fully accessible.
kostas
kostas13mo ago
I more intresting on how you find the page than making the effect right now, i was searching for hours, thank you
MarkBoots
MarkBoots13mo ago
i googled on Anna and her function in combination with the tower name
kostas
kostas13mo ago
i was searching only the tower name and there all lot of webpages of damac but not thi ones..again thank you! @MarkBoots I finally made it!!! thanks for your guidance! Here is the code itself My vertical animation scrolling. Let me know what you think about it 👍 of course I will make it responsive but right now is working only for desktops
Want results from more Discord servers?
Add your server