在滚动div逐渐淡出淡出

Question

I am trying to creating fadein fadeout effect with scrolling but not figure out how . it is like http://www.popsci.com/ . There If scroll then background image (div id fixed-image ) get fading. Them code something like. But I cannot figure out yet how to easily apply in my code. Would guys please check it my code .

var opacity = 1;
      var img = element.find('img');
      // Look for featured stories.
      if (element.length > 0) {
        // Attach background image element.
        $('#page-wrapper').prepend('<div id="fixed-image" style="background-image: url(\'' + img.attr('data-lgsrc') + '\');"></div>');
        img.addClass('hidden');
        var scrollPercent;
        $(window).scroll(function() {
          // When User scrolls down, determine percentage from top to bottom of window.
          scrollPercent = (($(window).scrollTop() / $(window).height() * 1.9) - 0.9);
          if (scrollPercent < 0) {
            $('#fixed-image').css({
              '-webkit-filter'  : 'blur(0px)',
              '-moz-filter'     : 'blur(0px)',
              '-o-filter'       : 'blur(0px)',
              '-ms-filter'      : 'blur(0px)',
              'filter'          : 'blur(0px)'
            });
          }
          var opacityCount = 1.5 - Math.min(1.5, (scrollPercent + 1));
          $('#fixed-image').css('opacity', opacityCount);
          if (scrollPercent <= 1) {
            $('#fixed-image').css('opacity', opacityCount);
            $('#fixed-image').css({
              '-webkit-filter'  : 'blur(' + scrollPercent * 10 + 'px)',
              '-moz-filter'     : 'blur(' + scrollPercent * 10 + 'px)',
              '-o-filter'       : 'blur(' + scrollPercent * 10 + 'px)',
              '-ms-filter'      : 'blur(' + scrollPercent * 10 + 'px)',
              'filter'          : 'blur(' + scrollPercent * 10 + 'px)'
            });
          }
          else {
            $('.content-wrapper-outer').css('background-color', 'rgba(255,255,255,' + opacity + ')');

my demo is here https://jsfiddle.net/cyber007/6e6dbr6j/1/

i want slider class will be fadeIn and fadeout gradually base on scrolling

UPDATE

$(window).scroll(function(){
    $(".slider").css("opacity", 1 - $(window).scrollTop() / 250);
  });

https://jsfiddle.net/cyber007/6e6dbr6j/2/ this one work fine. jus one minor think in console i saw that opacity value keep running after 0 even going - value. i don't think after value 0 no need down value more

Answer 1

Here's a function to clip opacity at 0, although according to MDN : "Any value outside the interval [0 to 1], though valid, is clamped to the nearest limit in the range," so it's not strictly necessary.

$(window).scroll(function(){
    var opacity = 1 - $(window).scrollTop() / 250;
    if (opacity < 0 ) opacity = 0;
    $(".slider").css("opacity", opacity);
});

UPDATE

For arbitrary start and end of your transition, use the linear equation , like so:

$(window).scroll(function(){
    var start = 200, end = 600;
    var opacity = 1 - ($(window).scrollTop() - start) / (end - start);
    if (opacity > 1 ) opacity = 1;
    if (opacity < 0 ) opacity = 0;
    $(".slider").css("opacity", opacity);
  });

Here's a JSFiddle.