動畫不透明進出滾動

因此，我有一組名爲.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 { 

     } 

    }); 

});

來源

2017-09-13 user1374796

設置一些data-gb-color與RGB值一樣255,0,0＆hellip;
在視口高度計算當前跟蹤的元素。
比得到inViewport元件高度的0..1值，並使用它作爲Alpha通道爲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>

來源

2017-09-13 21:22:37

貌似那效果是使用兩個固定的div，所以如果你需要一些簡單的東西你就可以了一個這樣做：

但如果你需要更復雜的東西使用@Roko's答案。

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>

來源

2017-09-14 00:29:28

動畫不透明進出滾動

回答

相關問題