how to get nav to zoom out on scroll.
same as on this site.
Simply - Google the following:
- scale header on scroll
- scale navbar on scroll
- etc.,
You will find plenty of examples and approaches for what you want to accomplish.
This is typically done using Javascript/Jquery to “listen” for the scroll event, and CSS transitions to scale the content. You can probably figure out how it’s done by looking at it through Chrome or Firefox’s inspector.
For example, on the site you posted, the header (the black area) has a class .header, and a second class of .header-top added to it when the scroll happens. This is done through the javascript. The .header class also has a CSS transition: all .3s ease; which causes to the header to gracefully shrink over .3 seconds, rather than just “pop” into the smaller size. The company logo and the navigation also have the same .3 second transition, so they shrink slowly. The navigation menu resizes and moves up by changes in position (top:) and font size. On other pages of the site, the opacity of the header is also changed.
Keep in mind, as a designer, that while having things move, spin and resize on your website looks snazzy, it if doesn’t add to the functionality, branding, or most importantly, user experience, you’re probably better off without it. Any time something moves, it’s one more thing the user’s eyes have to keep track of when they’re already keeping track of the site scrolling by. For some people, this is a distraction.
So on your sample site, the main advantage I can see to having a larger header initially is that the logo is bigger, which lets people clearly know they’re on THIS company’s website. I like this, because too many Bootstrap templates force people to shrink their logos very small.
The advantage of a smaller logo is of course, more screen real estate for content. So to me, this animated shrinking header is a good solution to allow both a larger logo, and more space for content. I like it. I also like the fact that the header with the navigation “sticks” to the top, so that the person doesn’t have to scroll back up to move to a new page. It relieve one of having to duplicate the navigation in the footer, though there are still good reason to have links in the footer to other parts of the site that a user may want to explore after reading the page content.
Something I stumbled across that should get you headed in the right direction…
The reason I merely suggested the Google search query above, is by doing so they would find everything needed to understand and accomplish the task. From written and video tutorials, codepen examples, detailed stackoverflow answers, links to working jsfiddles, etc., 