How to animate background-color opacity on scroll event?

Question

I have two bits of code that I want to merge, but not sure on the actual correct markup and how to write it correctly.

function EasyPeasyParallax() {
  scrollPos = $(document).scrollTop();
    $('#header_nav').css({
        'background-color': 'rgba(0, 0, 0, 0.8)'
      //'opacity': 0.5+(Math.min(scrollPos/100,1))
  });
};

$(function(){
  $('body').bind('mousewheel',EasyPeasyParallax);
});

The opacity selector works when I scroll down the page. However, I want to only target the background color of the div. How can I combine the 'background-color' selector with the scrollPos/100 code?

are you trying to change the actual color, or the opacity of the background color? — Smeegs, Jul 08 '14 at 15:38

score 3 · Answer 1 · edited May 23 '17 at 12:11

You can use this code for animationg background-color's opacity property on scroll event.

jsFiddle Demo

function EasyPeasyParallax() {
    var scrollPos = $(document).scrollTop();
    var targetOpacity = 1;
    scrollPos < 1000 ? targetOpacity = '0.'+ (scrollPos*100)/10 : targetOpacity;
    $('span').css({
        'background-color': 'rgba(0, 0, 0, '+ targetOpacity +')'
    });
    console.log(scrollPos,targetOpacity);
};

$(function(){
    $(window).scroll(function() {
        EasyPeasyParallax();
    });
});

-

If you want to animate background-color with jQuery, inspect this answer:

Special color transition effect with pure jQuery animation // no ui or other libary

And if you seek good performance, only save the current scroll position in the scroll listener and make an additional RequestAnimationFrame loop that does the rendering. — Alp, Jul 08 '14 at 16:06

score 0 · Answer 2 · answered Jul 08 '14 at 16:03

        function EasyPeasyParallax() {
            scrollPos = $(document).scrollTop();
            var opacityVal = 0.5+(Math.min(scrollPos/100,1));
            var rgbaCol = 'rgba(0, 0, 0, ' + opacityVal + ')'
            $('#header_nav').css('background-color', rgbaCol);
        };

How to animate background-color opacity on scroll event?

2 Answers2