스크롤에서 불투명도를 애니메이션으로 바꾼다.

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

• 이 255,0,0 중 & hellip 같은 RGB 일부 data-gb-color 값을 설정;
• 현재 추적 된 요소 in-viewport-height를 계산합니다.
• inViewport 소자 높이의 0..1값을 얻고 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>

Answer 2

모습 그 효과는 고정 된 div 두 개를 사용하므로 여러분이 간단한 것을 필요로한다면 c 그것을 좋아합니까 :

하지만 뭔가 더 복잡한 사용이 필요하면 @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>