上下滚动动画不透明度

Question

因此，我有一组称为.project-slide的元素，一个接一个。 其中一些将具有.colour-change类，如果它们具有此类，则会在出现时更改.background元素的背景颜色。 到目前为止，这是我得到的： https : //codepen.io/neal_fletcher/pen/eGmmvJ

但我正在寻求实现以下目标： http : //studio.institute/clients/nike/

滚动浏览页面以查看背景更改。 因此，在我的情况下，我想要的是，当出现.colour-change时，它将缓慢为.background元素的不透明度设置动画，然后在我滚动通过它时，为不透明度缓慢设置动画（在是）。

任何有关如何实现这一目标的建议将不胜感激！

HTML：

    <div class="project-slide fullscreen">
        SLIDE ONE
    </div>

    <div class="project-slide fullscreen">
        SLIDE TWO
    </div>

    <div class="project-slide fullscreen colour-change" data-bg="#EA8D02">
        SLIDE THREE
    </div>

<div class="project-slide fullscreen">
        SLIDE TWO
    </div>

<div class="project-slide fullscreen colour-change" data-bg="#cccccc">
        SLIDE THREE
    </div>

</div>

jQuery的：

$(window).on('scroll', function () {

    $('.project-slide').each(function() {

        if ($(window).scrollTop() >= $(this).offset().top - ($(window).height() / 2)) {
            if($(this).hasClass('colour-change')) {
              var bgCol = $(this).attr('data-bg');

              $('.background').css('background-color', bgCol);

            } else {

            }
        } else {

        }

    });

}); 

Answer 1

• 设置一些RGB data-gb-color 255,0,0 data-gb-color …
• 计算当前跟踪的元素in-viewport-height。
• 然后获取inViewport元素高度的0..1 值 ，并将其用作RGB颜色的Alpha通道 ：

 /** * inViewport jQuery plugin by Roko CB * http://stackoverflow.com/a/26831113/383904 * Returns a callback function with an argument holding * the current amount of px an element is visible in viewport * (The min returned value is 0 (element outside of viewport) */ ; (function($, win) { $.fn.inViewport = function(cb) { return this.each(function(i, el) { function visPx() { var elH = $(el).outerHeight(), H = $(win).height(), r = el.getBoundingClientRect(), t = r.top, b = r.bottom; return cb.call(el, Math.max(0, t > 0 ? Math.min(elH, H - t) : (b < H ? b : H)), H); } visPx(); $(win).on("resize scroll", visPx); }); }; }(jQuery, window)); // OK. Let's do it var $wrap = $(".background"); $("[data-bg-color]").inViewport(function(px, winH) { var opacity = (px - winH) / winH + 1; if (opacity <= 0) return; // Ignore if value is 0 $wrap.css({background: "rgba(" + this.dataset.bgColor + ", " + opacity + ")"}); }); 

 /*QuickReset*/*{margin:0;box-sizing:border-box;}html,body{height:100%;font:14px/1.4 sans-serif;} .project-slide { height: 100vh; display: flex; align-items: center; justify-content: center; } .project-slide h2 { font-weight: 100; font-size: 10vw; } 

 <div class="project-slides-wrap background"> <div class="project-slide"> <h2>when in trouble...</h2> </div> <div class="project-slide" data-bg-color="0,200,255"> <h2>real trouble...</h2> </div> <div class="project-slide"> <h2>ask...</h2> </div> <div class="project-slide" data-bg-color="244,128,36"> <h2>stack<b>overflow</b></h2> </div> </div> <script src="//code.jquery.com/jquery-3.1.0.js"></script> 

Answer 2

看起来该效果正在使用两个固定的div，因此，如果您需要类似的简单内容，可以这样做：

但是，如果您需要更复杂的东西，请使用@Roko的答案。

 var fixed = $(".fixed"); var fixed2 = $(".fixed2"); $( window ).scroll(function() { var top = $( window ).scrollTop(); var opacity = (top)/300; if( opacity > 1 ) opacity = 1; fixed.css("opacity",opacity); if( fixed.css('opacity') == 1 ) { top = 0; opacity = (top += $( window ).scrollTop()-400)/300; if( opacity > 1 ) opacity = 1; fixed2.css("opacity",opacity); } }); 

 .fixed{ display: block; width: 100%; height: 200px; background: blue; position: fixed; top: 0px; left: 0px; color: #FFF; padding: 0px; margin: 0px; opacity: 0; } .fixed2{ display: block; width: 100%; height: 200px; background: red; position: fixed; top: 0px; left: 0px; color: #FFF; padding: 0px; margin: 0px; opacity: 0; } .container{ display: inline-block; width: 100%; height: 2000px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> Scroll me!! </div> <div class="fixed"> </div> <div class="fixed2"> </div>