SOLVED Best way to reproduce navigation height on scroll
-
-
- Marco Conti
- Jr. Rocketeer
- Posts: 39
- Thanks: 0
-
I am tasked with reproducing several css animation effects on a website and I am a little stumped on a specific effect on this website:
https://skylineinvestmentgroup.com
In this template (not Gantry based) when the user scrolls, the navigation bar is sticky but also the height is reduced and the logo zooms/fades out.
I looked for Gantry particles to reproduce the effect, but couldn't find anything. I have the wow.js atom installed, but I don't think there is a way to do this.
Does anyone have any leads on a good animation library, compattible with Gantry (especially other gantry animation atoms) that could help me solve this issue?
The idea is to place the library someplace in the template, then use Gantry to call both the css and JS to activate the animation.
Any help appreciated. - Last Edit: 2 years 5 months ago by Marco Conti.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
Your subscription appears to have expired. Support does require a current subscription.
But...
Use the fixedheader atom - this adds/removes classes on the body tag as the page is scrolled/positioned - you can then use these to do a CSS animation of whatever you need. You don't need any libraries of anything else to do that.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Marco Conti
- Jr. Rocketeer
- Posts: 39
- Thanks: 0
-
Thank you. I didn't realized my subscription had expired. I figured it would prevent me from posting otherwise.
Thank you for the reply. I'll resubscribe as soon as I have a minute to spare (my work pays for it anyway).
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
It does preventing your posting anywhere but the "general" open forums (which is what you did).
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
Time to create page: 0.069 seconds