I’m trying to come up with a cool parallax 3d effect where the text zooms in from background as the user scrolls down.
I have a background image with a 3d grid. As the user scrolls down I want the text to appear to come from the background(center-center) and zoom in as the parallax section comes onto the screen, then fade away as they continue to scroll past this section.
Almost like the star wars credits effect, but in reverse.
I found a codepen for the star wars credits, but it’s actually an animation where I’m looking a scrolling effect.
Hey Bev, I read your page and noticed the scroll amount you mentioned. With smoothly scrolled Firefox, I think the maximum events fired are possibly equal to the monitor’s refresh rate – which can add up to 60 (Hz) at least. Maybe even more with more advanced devices.
In my own recent script, throttling scrolling to 30ms cut the load in half!
Weren’t I currently fiddling with other code, I’d find this a quite interesting little project as well.
Indeed extra height could make the effect somewhat smoother and more pronounced. It might not be all too obvious that it is rotating as well now. What is also a bit limiting, is the nested markup. Since position: fixed is the easiest option to go for, I would instead make it a direct parent of body. I recall Webkit browsers not handling nested fixed elements very well, although in this case I suppose it is alright because the transform gives it its own stacking context.