Home › Forums › JavaScript › Change font-size while scrolling
- This topic has 16 replies, 1 voice, and was last updated 4 years, 3 months ago by aitchgee.
-
AuthorPosts
-
January 31, 2018 at 5:34 pm #266171olivierjonParticipant
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 #266201ShikkedielParticipantHere’s a quick imitation of the idea:
February 1, 2018 at 6:38 pm #266202olivierjonParticipantDo you think it’s possible to start with vw units ?
February 1, 2018 at 9:28 pm #266204ShikkedielParticipantSure…
var mass = Math.max(2, 5-0.01*$(this).scrollTop()) + 'vw';
First number there (
2
) is the minimum size invw
it will shrink to,5
should match what’s defined in the CSS and0.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 atransform: scale
instead. Something like this:February 2, 2018 at 4:51 am #266215olivierjonParticipantOh, 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 #266216ShikkedielParticipantI 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 #266224olivierjonParticipantIf 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 #266230ShikkedielParticipantCould 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 usingvw
for line-height will make the top element very large and the text itself unreadable because it’s outside the screen, like here:February 3, 2018 at 4:23 am #266232olivierjonParticipantHappy 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 #266249ShikkedielParticipantFrom 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 #266250ShikkedielParticipantHere it is after a first bit of fiddling, adding the functionality I think you intended:
February 4, 2018 at 3:26 am #266257olivierjonParticipantYou 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 #278617jorgearmandoParticipantHello 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 #278622ShikkedielParticipantNo problem, just a few adjustments…
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 currently0.005
.November 9, 2018 at 1:57 pm #278652jorgearmandoParticipantperfect, thanks for the help.
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.