Parallax / floating effect
I'm trying to make a really simple floating effect where a foreground element moves at a different speed than the background. I understand I can use background-attachment: fixed for a parallax effect but I don't really want that; I just want the foreground elements to move at a different speed (if they have a .parallax class).
https://codepen.io/vince1444/pen/bNGYwBa
I can't seem to get this to work, and all the resources out there are honestly pretty bad; I can't seem to find anything that works well.
An example that comes to mind is Gumroad's old homepage (though I doubt anyone remembers that). I went to see how they implemented it again but realized they changed their homepage. I vaguely remember them using transform3d and perspective, and just changed the translateY on scroll but I don't remember exactly
3 Replies
I think I got something kind of working and really all I did was make the transition timing longer but it still looks kind of off to me, maybe I'm going crazy though 😅
You just need to mess with the values for delay, duration and timing function to kind of tweak it to where you want it, it's unfortunately not am absolute science w step by step instructions
Just looked at your pen amd I only see a bg color and one text node. Usually with parallax you have some different layers or bg image or a gradient so there's some contrast between the different elements moving
Right now the background all looks the same so it just kind of looks like the scroll is lagging
Ty let me try that!