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
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.
I more intresting on how you find the page than making the effect right now, i was searching for hours, thank you
i googled on Anna and her function in combination with the tower name
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