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 ?
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:
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 ?
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.
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
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:
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 :(…
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.
You must be logged in to reply to this topic.