- This topic is empty.
November 6, 2017 at 10:13 am #262255
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.
Here is mycode pen with what I have so far…
https://codepen.io/aaron4osu/pen/YEWdBrNovember 6, 2017 at 11:08 pm #262287BeverleyhParticipant
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.November 12, 2017 at 11:25 pm #262473
Here’s some idea:
The existing layout is quite limited and limiting though.
Edit – I’ve taken out the text but left the main structure intact.November 13, 2017 at 4:45 am #262474
Thanks… thats’s the effect I was looking for!
As far as it being limited… is that because of the height of the parallax section? I’m open for suggestions/ideas?November 13, 2017 at 6:51 am #262476
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: fixedis 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
transformgives it its own stacking context.November 13, 2017 at 3:06 pm #262485
Been tweaking around with it a bit, especially the
transformvalues. I think it looks a bit nicer already.
Pen above got updated…
Lol, try removing
.parallax-bg. Looks pretty neat, like it’s flying in through the ceiling.November 14, 2017 at 4:53 am #262509
I like it!! Thanks again!!!
I’m going to work in onto the site that I’m working on and then post a code pen for that page to put everything into context.November 14, 2017 at 5:01 am #262510
No problem, kinda fun to make. Also added a bit of throttling and a resize function. Let me know when it’s not working for some reason, no doubt there’ll be a few more details to attend to.
- The forum ‘Design’ is closed to new topics and replies.