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 ...
计算当前跟踪的元素in-viewport-height。
获取 inViewport 元素高度的0..1 值，并将其用作的 Alpha通道 RGB 颜色：

＆＃13;

/**
 * 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 + ")"});
});

＆＃13;

/*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;
}

＆＃13;

<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>

＆＃13;

Answer 2

看起来这个效果使用了两个固定的div，所以如果你需要像这样简单的东西，你可以这样做：

但如果你需要更复杂的东西，请使用@Roko's回答。

＆＃13;

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);
}
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

在滚动中输入和输出不透明度

2 个答案: