January 31, 2018 at 5:34 pm #266171
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 #266201February 1, 2018 at 6:38 pm #266202
Do you think it’s possible to start with vw units ?February 1, 2018 at 9:28 pm #266204
var mass = Math.max(2, 5-0.01*$(this).scrollTop()) + 'vw';
First number there (
2) is the minimum size in
vwit will shrink to,
5should match what’s defined in the CSS and
0.01is the factor that determines how fast it’ll shrink with scrolling.
Edit – using
font-sizeis how they do it on the example page you linked to. I think I would personally probably choose to go with a
transform: scaleinstead. Something like this:February 2, 2018 at 4:51 am #266215
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 #266216
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 #266224
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 wayFebruary 2, 2018 at 9:17 pm #266230
Could you elaborate perhaps on why you prefer to use
vwfor so many properties? Because it pretty much impossible to make that work well for all cases… for example,
width: 100vwwill include the scrollbar in Firefox which in turn will cause a horizontal scrollbar to appear. And using
vwfor 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 #266232
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 #266249
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 #266250
Here it is after a first bit of fiddling, adding the functionality I think you intended:February 4, 2018 at 3:26 am #266257
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 #278617jorgearmandoParticipant
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 #278622
No problem, just a few adjustments…
var mass = Math.min(2.5, 1+0.005*$(this).scrollTop());
2.5is 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 #278652jorgearmandoParticipant
perfect, thanks for the help.