고정 된 콘텐츠 아래에 스크롤 가능한 텍스트가 표시되지 않도록 설정합니다.

Question

스크롤 마법을 사용하여 콘텐츠를 스크롤하고 콘텐츠의 일부를 고정합니다.

<div class="container"> 
    <div class="header"> 
    <div style="height:400px;"> 
    </div> 
    <div id="trigger1" style="min-height: 1px"></div> 
    <div id="pin" style="font-size: 30px; color: #fff;text-align:center;padding:30px 0;"> 
     This is header 
    </div> 
    </div> 
    <div class="text-container"> 
    <p class="text"> 
     Lorem Ipsum is simply .... 
    </p> 
    <p class="text"> 
     Lorem Ipsum is simply .... 
    </p> 
    <p class="text"> 
     Lorem Ipsum is simply .... 
    </p> 
    </div> 
</div> 

이 자바 스크립트입니다 : 여기

 $(function() { 
      var controller = new ScrollMagic.Controller({ 
       globalSceneOptions: { 
        triggerHook: 'onLeave' 
       } 
      }); 
      var scene = new ScrollMagic.Scene({triggerElement: "#trigger1"}) 
        .setPin("#pin") 
        .addTo(controller); 
     }); 

jsfiddle된다 '는 .text는'#pin 컨텐츠 아래 위로 이동하면 https://jsfiddle.net/mddc/93sagkab/27/이

, 당신이 그것을 볼 수 있습니다 다음은 HTML입니다. #pin 이하일 때 .text을 표시하지 않으려면 CSS를 사용하려면 어떻게해야합니까? 나는 산을 배경으로 보여주는 현재의 디자인을 유지할 필요가있다.

Answer 1

.text 요소에 클래스를 추가 할 수 있습니다. 이처럼 :

var scene = new ScrollMagic.Scene({triggerElement: "#trigger1"}) 
        .setPin("#pin") 
        .setClassToggle(".text", "fade") //Add a class called "fade" 
        .addTo(controller); 

그런 다음 .text 요소에 CSS의 transition을 정의합니다.

.text.fade { 
    opacity: 0; 
} 

이 fiddle를 참조하십시오

.text { 
    height: 1000px; 
    transition: opacity 150ms ease-out; //Add this 
} 

그런 다음 .fade 스타일을 정의합니다.