How to create a color transition controlled by window scroll

Question

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!

**UPDATE

Here is my HTML.

  <div class="navBg">
    </div>
    <nav class="navbar navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <span class="navbar-brand" href="#home">JG</span>
        </div>
        <div id="navbar" class="navbar-collapse collapse navbar-right">
          <ul class="nav navbar-nav">
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
      </div>
    </nav>

This is my updated jQuery:

  var currentFontIndex = range * fontScale.length / limit;

  currentFontIndex = Math.round(currentFontIndex);
  console.log(fontScale[currentFontIndex]);

  if(currentFontIndex > fontScale.length){

    $('.navbar .navbar-header .navbar-brand').css({
      color: fontScale[currentFontIndex]
    });
    $('.navbar #navbar ul li a').css({
      color: fontScale[currentFontIndex]
    });

  }

For some reason the styles aren't being applied and I'm not sure why. My selectors are properly set to override the style set in my CSS stylesheet. Also, the fontScale array index is logging to my console the correct index values.

Any ideas?

you should set the css according to .css() http://api.jquery.com/css/ with .css("color", colorVar) but u try instead getting not setting property — grzesiekmq, Feb 14 '17 at 11:41

score 5 · Accepted Answer · answered Feb 14 '17 at 00:59

5

If you can convert some Y coordinate (0px to 450px) into opacity (0 to 1) you can do the same for array index!

0px -> 0 opacity -> index 0
450px -> 1 opacity -> index  10

...

currentScrollTop-> currentColorIndex

cross product!

currentColorIndex = currentScrollTop * 10 / 450

or

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

var fontScale=[
 ....
]

var currentFontIndex = range * fontScale.length / limit;

 //of course, you can't only have integer for index,
 //so you'll have to chose a rounding function, like: 
currentFontIndex = Math.round(currentFontIndex);

if(currentFontIndex > fontScale.length)
     currentFontIndex = fontScale.length

$('.navBg').css('color', fontScale[currentFontIndex]);

answered Feb 14 '17 at 00:59

Cawet

254
2
12

I see what you did there. I'm going to work on it and get back to you! – Jcode Feb 14 '17 at 01:04
I updated my original post if you don't mind taking a look. – Jcode Feb 14 '17 at 01:54
Sorry to answering as late ! if you dont resolved you probleme yet, is you'r console.log dump the right value? Also, if(currentFontIndex > fontScale.length)) is in the wrong way i think, this mine "if currentFontIndex is bigger than the array length" – Cawet Feb 19 '17 at 15:29
Hello! Everything is working great. Thanks again for showing me the calculation for finding the index values. And yes you are correct, I changed the if statement to greater than. – Jcode Mar 01 '17 at 14:26

score 3 · Answer 2 · answered Feb 14 '17 at 01:08

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

You can divide $(this).scrollTop() by 45 to reference element of array

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

var div = $("div");

$(window).on("scroll", function(e) {
  var curr = Math.round($(this).scrollTop() / 45);
  console.log(curr);
  div.css("color", fontScale[curr])
}).scroll()

body {
  height: 500px;
  background: yellow;
  position: absolute;
  display: block;
  text-align: center;
  top: 50vh;
  left: 35vw;
  font-size: 36px;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div>abc</div>
</body>

grzesiekmq · Answer 3 · 2017-02-14T03:49:01.593

simple example with for ( ; ; ) to show idea

var fontScale = ["#19BFFF",
  "#336CFF",
  "#4CCDFF",
  "#66D4FF",
  "#7FDBFF",
  "#99E2FF",
  "#B2E9FF",
  "#CCF0FF",
  "#E5F7FF",
  "#FFF"
];
var height = $(window).scrollTop();
$(window).scroll(function() {


  for (var i = 0; i < 3; i++) {
    if (height >= 0) {
      $('body').css('color', fontScale[i]);
    }
  }
  for (var i = 3; i < 6; i++) {
    if (height > 100) {
      $('body').css('color', fontScale[i]);
    }
  }
  for (var i = 6; i < fontScale.length; i++) {
    if (height > 200) {
      $('body').css('color', fontScale[i]);
    }
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
lorem ipsum aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaalorem ipsum aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaalorem ipsumlorelorem
ipsum aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaloaaaaaaaaaaaaaaalorem ipsumlorelorem ipsum aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaalorem ipsumlorelorem ipsum aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaalorem ipsumlorelorem ipsum aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaalorem
ipsumlorelorem ipsum aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaalorem ipsumlorelorem ipsum aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaalorem
ipsumlorelorem ipsum aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaarem ipsumlorelorem ipsum aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaalorem
ipsumloreaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaalorem
ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlolorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
ipsumlorem ipsumlorem ipsumlorem iprem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</nav>
</div>

and use if with conditions u want to make intervals with colors

score 0 · Answer 4 · answered Feb 14 '17 at 02:15

0

This works:

var currentFontIndex = range * fontScale.length / limit;

  currentFontIndex = Math.round(currentFontIndex);
  console.log(fontScale[currentFontIndex]);

  if(currentFontIndex <= fontScale.length){

    $('.navbar .navbar-header .navbar-brand').css(
      'color', fontScale[currentFontIndex]
    );
    $('.navbar #navbar ul li a').css(
      'color', fontScale[currentFontIndex]
    );

  }

The only problem that lies now is finding an application that will allow me to create custom color palettes. For example I need all colors from #00ADEF(a light blue) to #FFF(white). The current colors i'm using in my arrays are way off and it looks terrible. Does anyone know of a good resource I can use?

answered Feb 14 '17 at 02:15

Jcode

223
1
11

1

"Does anyone know of a good resource …" How about a spreadsheet? Or you could have your friend JavaScript do it — either way, pick a color model (RGB is fine, HSL is probably better) and do a component-wise linear interpolation. If JavaScript does it, your array could even be generated as needed, rather than hard-coded. – Fox Feb 14 '17 at 08:04
hsl is better to understand and easier to make color from blue to white u can use hue – grzesiekmq Feb 14 '17 at 11:57

How to create a color transition controlled by window scroll

4 Answers4