Streaming live at 10am (PST)

How do I make only the section background opacity animate?


#1

When you first enter my site, the navigation at the top looks like this:

I want it to look like this when I scroll down:

In other words, the section background opacity decreases. Right now, if I do an opacity change animation on the section, it also effects everything contained within that section, so my nav buttons disappear as well. I tried a hover change, which looks good, but I want it to trigger when scrolling down the page.

I feel like maybe there's something obvious I might be missing, so forgive me if I'm asking something that's plain as day. Any help you guys could offer would be greatly appreciated. THANKS!


How does one change nav bar color on scroll?
#2

Can you send a preview link of your website for us to play with? I think I can get the effect you're trying to achieve.
To get the interactions to not affect the other elements within a div, you basically have to build them as their own divs. So you could maybe have a "RiteNOW" div that just held the description and the background color for the full width. Then a div for just the menu pieces. You wouldn't be able to nest the menu pieces div into that "RiteNOW" div, instead, you'd need to set it's position to Absolute and then position it where you want it so that it sits on top of that "RiteNOW" div.Then after that we can get your opacity animation smile


#3

Hi @ravin30000, here is how to get your read-only link: http://help.webflow.com/faq/general/how-do-i-share-my-sites-read-only-link, cheers, dave smile


#4
$(document).ready(function() {
  $(window).scroll(function() {
    if($(window).scrollTop()>0) {
      $('.navbar').style('background-color', 'transparent');
    } else {
      $('.navbar').style('background-color', '#f02cb8');
    }
  });
});

#5

Wow, I go Lyft for the day and come back to great feedback! Here is my read-only link:

https://preview.webflow.com/preview/ritenow?preview=07830d87731ccdda2b9375e71b4c0e2e

@Waldo_Broodryk Thanks so much, I will experiment with what you're saying and report back...

@bartekkustra How do I incorporate your code into my site. Can I just add it in the custom code section of the dashboard or will I need to have a programmer add it outside of Webflow? I'm a designer by trade, so the code stuff is new territory for me...


#6

Hello @ravin30000,

Let's go step by step, shall we? :) First of all we have to determine what your class name is.


Webflow while you export your website or push it to public changes the class names a little bit. All letters become small letters and spaces are changed to dash "-". As we can see on the pic above your class in Webflow is called Navigation Section. That means your published website will change its name to .navigation-section. Notice the dot "." at the beginning - for jQuery code it notifies the code to look for a class with the following name.

Once we know what your classname is we have to change the code a little bit by selecting proper classname as a target. In the code I have provided you can see .navbar as a classname in line 4 and 6 - This is where I target the proper object on the website. We have to change the target classname and also the color in which the navbar should appear.

We can clearly see it's #ff3859 so we should apply that to the code as well.

$(document).ready(function() {
  $(window).scroll(function() {
    if($(window).scrollTop()>0) {
      $('.navigation-section').style('background-color', 'transparent');
    } else {
      $('.navigation-section').style('background-color', '#ff3859');
    }
  });
});

The code I have given you above should be placed in the Custom Code in your site dashboard. Let me quickly explain to you what are the differences of the custom code. As you can see Webflow has 2 spots in which we can put code - head and footer code.

The head code is mostly used for styles. Actually in this task we should put something there, because when the site loads the navbar should be transparent, yet you want it to be fullcolor while in Webflow Designer mode. Let's then put the following code in the head code.

<style>
  .navigation-section { background: transparent; }
</style>

Thanks to this piece of code you will have full color of navbar set in Webflow Designer mode, but on site load it will change to transparent. Now let's go to footer code. This is the place where all (well... most) of my ninja skills take place. In footer code we place all the Custom Code as this is something that is "called" after everything on website has loaded. The code here (if it is javascript or related) should be placed inside <script>...</script> tags. Please put the code I have given you above in here wrapped in <script></script> tags as shown on the picture below.

Now all you have to do is hit and publish the website to see changes. Remember that custom code and scripts are not visible within Designer Mode.



Yeah... another great tutorial written :) If you have any troubles going through implementation of this feel free to ask here on forum, but please make sure you publish the website and gives us the link to it :) (ritenow.webflow.io?)

Best,
Bartosz


#7

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