Forums

Give help. Get help.

  • # November 6, 2017 at 10:13 am

    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…

    # November 6, 2017 at 11:08 pm

    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

    # November 8, 2017 at 2:01 am

    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

    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

    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

    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.

    # November 13, 2017 at 3:06 pm

    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.

    # November 14, 2017 at 4:53 am

    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

    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.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag