ScrollMagic : 고정 된 영역과 겹치면 콘텐츠 숨기기

Question

내 페이지에서 ScrollMagic을 사용하고 있습니다. https://jsfiddle.net/gg8t714q/2/

페이지를 아래로 스크롤, 컨텐츠 영역 (div.content)가 겹쳐 : 여기

var controller = new ScrollMagic.Controller(); 
var scene1 = new ScrollMagic.Scene({triggerElement: "#trigger", triggerHook: 'onLeave'}) 
      .setPin("#pin-area") 
      .addTo(controller); 

가 jsfiddle 데모입니다 :

여기

<div class="container"> 

    <div class="before-trigger"> 
    </div> 

    <div class="trigger" id="trigger"> 
    </div> 

    <div class="pin-area" id="pin-area"> 
    This is a pinned area. 
    </div> 

    <div class="content"> 
    Lorem ipsum ... 
    </div> 

</div> 

내 자바 스크립트입니다 다음은 HTML입니다 고정 된 영역. 배경 이미지를 숨기지 않고 오버랩 영역의 내용을 숨기려면 어떻게해야합니까? 다른 말로하면 고정 된 영역에서 배경 이미지를 볼 수 있습니다.

도움 주셔서 감사합니다.

Answer 1

.container 규칙과 동일한 배경 항목을 .pin-area 규칙에 추가 할 수 있습니다. 그래서 .pin-area은 다음과 같습니다

.pin-area { 
    background-image: url('http://www.nationalgeographic.com/content/dam/science/photos/000/011/1106.adapt.1900.1.jpg'); 
    background-position: right bottom; 
    background-attachment: fixed; 
    font-size: 2em; 
    color: #fff; 
    padding: 30px; 
    border: 2px solid #fff; 
    text-align: center; 
} 

var controller = new ScrollMagic.Controller(); 
 

 
var scene1 = new ScrollMagic.Scene({ 
 
    triggerElement: "#trigger", 
 
    triggerHook: 'onLeave' 
 
    }) 
 
    .setPin("#pin-area") 
 
    .addTo(controller);

body { 
 
    padding: 0; 
 
} 
 

 
.container { 
 
    background-image: url('http://www.nationalgeographic.com/content/dam/science/photos/000/011/1106.adapt.1900.1.jpg'); 
 
    background-position: right bottom; 
 
    background-attachment: fixed; 
 
} 
 

 
.before-trigger { 
 
    height: 200px; 
 
} 
 

 
.trigger { 
 
    min-height: 1 
 
} 
 

 
.pin-area { 
 
    background-image: url('http://www.nationalgeographic.com/content/dam/science/photos/000/011/1106.adapt.1900.1.jpg'); 
 
    background-position: right bottom; 
 
    background-attachment: fixed; 
 
    font-size: 2em; 
 
    color: #fff; 
 
    padding: 30px; 
 
    border: 2px solid #fff; 
 
    text-align: center; 
 
} 
 

 
.content { 
 
    ; 
 
    height: 800px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script> 
 
<div class="container"> 
 

 
    <div class="before-trigger"> 
 
    </div> 
 

 
    <div class="trigger" id="trigger"> 
 
    </div> 
 

 
    <div class="pin-area" id="pin-area"> 
 
    This is a pinned area. 
 
    </div> 
 

 
    <div class="content"> 
 
    Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps to outline 
 
    the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero. Its words and letters have been changed by addition or removal, so to deliberately 
 
    render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. 
 
    </div> 
 
</div>