Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create a color transition controlled by window scroll

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?

like image 925
Jcode Avatar asked Feb 14 '17 00:02

Jcode


People also ask

How do I make text appear on scroll in HTML?

First wrap whatever your text or content that you want to show on scroll, in one div so that you can show hide the div depending upon the scroll. Write two classes for your target div. Hope it will solve your problem.

What is window scroll?

The Window. scroll() method scrolls the window to a particular place in the document.


2 Answers

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]);
like image 188
Cawet Avatar answered Oct 11 '22 04:10

Cawet


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>
like image 26
guest271314 Avatar answered Oct 11 '22 05:10

guest271314