Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Change font-size while scrolling

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #266171
    olivierjon
    Participant

    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 ?

    #266201
    Shikkediel
    Participant

    Here’s a quick imitation of the idea:

    codepen.io/QQjzJP

    #266202
    olivierjon
    Participant

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

    #266204
    Shikkediel
    Participant

    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

    #266215
    olivierjon
    Participant

    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 ?

    #266216
    Shikkediel
    Participant

    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.

    #266224
    olivierjon
    Participant

    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

    #266230
    Shikkediel
    Participant

    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

    #266232
    olivierjon
    Participant

    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 :(…

    #266249
    Shikkediel
    Participant

    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.

    #266250
    Shikkediel
    Participant

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

    codepen.io/zRqvBR

    #266257
    olivierjon
    Participant

    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…:)

    #278617
    jorgearmando
    Participant

    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.

    #278622
    Shikkediel
    Participant

    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.

    #278652
    jorgearmando
    Participant

    perfect, thanks for the help.

Viewing 15 posts - 1 through 15 (of 17 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.