javascript - 动画不透明度进出滚动

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

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

/**
 * inViewport jQuery plugin by Roko C.B.
 * 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>