lundi 13 février 2017

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.


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

  var calc = range / limit;

  //Bg Opacity Control
  if (range === 0) {
      opacity: 0

  }else if(range < limit){
      opacity: calc

  }else if(range > limit){
      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",

  //White to Gray
  var hoverScale = ["#eaeaea",

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.


asked 35 secs ago

Let's block ads! (Why?)

How to create a color transition controlled by window scroll

Aucun commentaire:

Enregistrer un commentaire