Help w Parallax 3D Effect with text zooming in from background

[Historical Forums User]

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.
https://codepen.io/geoffgraham/pen/BpwqOE

Here is mycode pen with what I have so far…
https://codepen.io/aaron4osu/pen/YEWdBr

[Beverleyh]

You’ll almost certainly need JavaScript to calculate scroll distance and change the position of the text accordingly. If it helps, I have a scroll progress script that does that which you can play around with. You might be able to come up with something using that as a base http://fofwebdesign.co.uk/template/_testing/scroll-progress.htm

[Shikkediel]

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.

[Shikkediel]

Here’s some idea:

https://codepen.io/Shikkediel/pen/QOggKV

The existing layout is quite limited and limiting though.

Edit – I’ve taken out the text but left the main structure intact.

[Historical Forums User]

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?

[Shikkediel]

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.

[Shikkediel]

Been tweaking around with it a bit, especially the transform values. I think it looks a bit nicer already.

Pen above got updated…

Lol, try removing background-attachment: fixed from .parallax-bg. Looks pretty neat, like it’s flying in through the ceiling.

[Historical Forums User]

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.

[Shikkediel]

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.

[Author]

Posts