Forums

Give help. Get help.

  • # January 31, 2018 at 5:34 pm

    I look desperately to create the same effect as on the site: http://studio-laucke-siebein.com/
    My goal is to decrease font size and its container while scrolling.
    It is not about changing div class on scroll but changing font size while scrolling!
    I tried to search in the source code, but I can not extract the juice!

    Do you have advices ?

    # February 1, 2018 at 4:53 pm

    Here’s a quick imitation of the idea:

    codepen.io/QQjzJP

    # February 1, 2018 at 6:38 pm

    Do you think it’s possible to start with vw units ?

    # February 1, 2018 at 9:28 pm

    Sure…

    codepen.io/LQpoMJ

    var mass = Math.max(2, 5-0.01*$(this).scrollTop()) + 'vw';
    

    First number there (2) is the minimum size in vw it will shrink to, 5 should match what’s defined in the CSS and 0.01 is the factor that determines how fast it’ll shrink with scrolling.

    Edit – using font-size is how they do it on the example page you linked to. I think I would personally probably choose to go with a transform: scale instead. Something like this:

    codepen.io/vdNqYq

    # February 2, 2018 at 4:51 am

    Oh, yes many thanks for you effort, I appreciate. Of course since my previous post, I’v changed “px” to “vw”, and I could see it’s working. But my goal is different.
    I would mean “how to start from vw to px a the end…”

    And, since my first post, I did some research and found MagicScroll plugin. This plugin does exacly what I’m looking for, but now comes an other issue : I did a reduced test case : https://jsfiddle.net/29pesoL5/

    My goal is simple : I’m trying to glue the two border from bottom header to top main, and while scrolling until 100px (the height header), the header could work like a sticky header…
    Maybe it demands a little knowledge about MagicScoll, but I’m wondering if the concept is good : start to vw, end to px, get glue to main and after 100px, be sticky…is possible ?

    # February 2, 2018 at 7:02 am

    I think I could make that work by coding it myself but have no experience with that plugin whatsoever so I can’t say I’m very inclined to give that a shot. It’ll likely take quite a bit of time to read up and isn’t much “fun” for me to create. Perhaps another forum member has some ready skills for MagicScroll, if you decide to go with it.

    # February 2, 2018 at 9:39 am

    If you have any idea on how to do that, don’t hesitate, I’m very open to all contributions ! I thought MagicScroll could be the solution, but I’m in front of another issue, so, maybe it’s not the right way.

    Again, I would be very grateful if you could help me in any way

    # February 2, 2018 at 9:17 pm

    Could you elaborate perhaps on why you prefer to use vw for so many properties? Because it pretty much impossible to make that work well for all cases… for example, width: 100vw will include the scrollbar in Firefox which in turn will cause a horizontal scrollbar to appear. And using vw for line-height will make the top element very large and the text itself unreadable because it’s outside the screen, like here:

    codepen.io/aqdRKL

    # February 3, 2018 at 4:23 am

    Happy to see you continue the thread with me !
    So, the “vw” unit width is not important, I can change it to %, but the vw for the line-height is an error, I just wanted to align the text to bottom but I know it can’t work, I need to use a child div aligned to bottom or flexbox..

    But finally, I decided to use a classic way of toggling class on scroll with animation, as you can see here https://jsfiddle.net/9ynswu01/ . I want now to pimp it a little by disabling the scroll during the animation after the first scroll, and allowing it after 1 second, the time of the header animation. (the goal is to avoid the user to scroll to the entire page before the header has reduced).

    So I tried it in my JsFiddle, but I’m not familiar with scroll and operations (….), and as you can see, it’s working just one time in five :(…

    # February 3, 2018 at 2:07 pm

    From a first glance, the problem with that script is that it’s rather unlikely for the scroll event to fire at the position of exactly 1 pixel. Most scroll events don’t fire that often, especially desktop browsers that aren’t using some form of smooth scrolling. They only fire once around every 150-200 pixels when using the mouse wheel.

    I’m also not sure you’d want to mess with the user interface like that by disabling all responsiveness… visitors might get slightly annoyed by it.

    Let me have another good look and see what I can make of it.

    # February 3, 2018 at 4:04 pm

    Here it is after a first bit of fiddling, adding the functionality I think you intended:

    codepen.io/zRqvBR

    # February 4, 2018 at 3:26 am

    You made my day, thanks a lot for your help.
    Your script effectively works better than mine, but I doubt about the user interface you pointed, specially for this case…:)

    # November 8, 2018 at 5:34 pm

    Hello everyone, I have a question, using this code https://codepen.io/anon/pen/vdNqYq as I can make the text zoom while I scroll. The opposite of what is currently.

    thanks for your time.

    # November 9, 2018 at 2:26 am

    No problem, just a few adjustments…

    codepen.io/anon/pen/LXZPew

    var mass = Math.min(2.5, 1+0.005*$(this).scrollTop());
    

    The number 2.5 is the maximum enlargement here. You can make it zoom faster or slower by changing factor that is currently 0.005.

    # November 9, 2018 at 1:57 pm

    perfect, thanks for the help.

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

You must be logged in to reply to this topic.

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