How to create a color transition controlled by window scroll

Vote count: 0

I have written some simple jQuery to have the background of my navbar change opacity from transparent to blue relative to the users scroll position.

  $(window).scroll(function(){

  var range = $(this).scrollTop();
  var limit = 450;

  var calc = range / limit;
  console.log(range);

  //Bg Opacity Control
  if (range === 0) {
    $('.navBg').css({
      opacity: 0
    });

  }else if(range < limit){
    $('.navBg').css({
      opacity: calc
    });


  }else if(range > limit){
    $('.navBg').css({
      opacity: 1
    });
  }

});

My next task is to have the font color transition as well. I want the color to change the same way the navs background changes (relative to the users scroll position). I started by creating two arrays containing hexadecimal values of colors to represent the color scale for the font transition.

  //Blue to White
  var fontScale = ["#19BFFF",
                  "#336CFF",
                  "#4CCDFF",
                  "#66D4FF",
                  "#7FDBFF",
                  "#99E2FF",
                  "#B2E9FF",
                  "#CCF0FF",
                  "#E5F7FF",
                  "#FFF"];

  //White to Gray
  var hoverScale = ["#eaeaea",
                   "#d6d5d5",
                   "#c1c0c1",
                   "#adacac",
                   "#989798",
                   "#848283",
                   "#6f6e6e",
                   "#5a595a",
                   "#464445",
                   "#323031"];

With my scrollTop() limit set to 450, within where these transitions should take place, I have 10 colors in each array. I want to change the CSS of the font color each time the user scrolls down 45px ( 450 / 10 = 45 ) by iterating through the colors in the arrays.

Here are my jQuery selectors for the elements that should be changing color using the arrays I posted above:

    //Main Font color to use fontScale array
    $('.navbar .navbar-header .navbar-brand')
    $('.navbar #navbar ul li a ')

    //active links to use hoveScale array
    $('.navbar #navbar .navbar-nav > .active > a')
    //Hover links to use hoverScale array
    $('.navbar #navbar ul li a:hover')

I'm unsure wether I should be using a for loop, a while loop, or purely if statements? Some advice or direction would be greatly appreciated! I can also post more code upon request.

Cheers!

asked 35 secs ago

Jcode

Let's block ads! (Why?)

How to create a color transition controlled by window scroll