Navbar FADE OUT by scrolling down and FADE IN by scrolling up

Hello,
has anyone done an interaction like this?

http://demo.theultralinx.com/pulse/

I try to figure out if it is possible to built it with the interaction tools. I guess I’m not even close to get it :slight_smile: maybe some one has more experience.

best wishes
Timo

Hey @Timo_Rohrig

Check out this page for tutorials: http://interactions.webflow.com/

And this video for the navbar interaction: http://interactions.webflow.com/fade-in-navbar-video

Tell me if you stumble upon any problems :slightly_smiling:

1 Like

Webflow’s built-in scroll interactions aren’t tied to a general/arbitrary up/down scroll function in the manner in which you need. You can scroll things in/out of view based upon another element in the dom, but not directly tied to a scroll action in a general sense. I don’t know the proper term for this, an experienced javascript/jquery developer could probably do a better job of explaining the details of it.

The good news is it shouldn’t be too hard to accomplish what you want by using this small jquery plugin called Popr.

Just insert the full minified popr.js script directly in the “Footer Code” section of your site settings (it’s only 12 lines of code, 2KB - wrap it in script tags). That would probably be the easiest way, then you can set the options for the speed/mode directly in the script. Then include their CSS styles in the “Head Code” section of your site (wrapped in style tags)

You will then re-create their HTML structure inside Webflow, and attach the necessary classes… just follow the directions on the scripts homepage. You can even set your options via data attributes inside the Webflow designer if preferred. The default styling provided by the included CSS with the plugin is pretty basic, just like your Pulse example you provided - but I’m sure you could even tweak/override that rather easily once you get into it a bit.

thank you Mogeek, I will try it and will give feedback if it’s works

@ DharmaNode: thanks, it’s not exactly what I ment but good to watch it again :wink:

No problem… I left out one step above, don’t forget to actually call the plugin as well after you have included it in the Footer Code section. Do this directly below the actual minified popr.js script… This portion of code included below, this piece already has the options set for the position (top) and speed (300ms)…

<script>
$(document).ready(function() {
     $('.popr').popr({
          'speed': 300,
          'mode': 'top'
     });
});
</script>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.