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
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
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Recent Announcements
Similar Threads
Was this page helpful?
