ScrollMagic 페이드 장면

Question

트리거 요소가 활성화 될 때 내 html 블록이 희미 해지지만 사용자가 다시 트리거를지나 스크롤하면 페이드 아웃됩니다. 나는 퇴색하고 싶지 않다. 페이드 인 (fade in)을하고 사용자가 f5를 누르거나 페이지를 다시로드 할 때까지 거기에두고 싶습니다.

$(document).ready(function(){ 
 

 
\t // Init ScrollMagic 
 
\t var controller = new ScrollMagic.Controller(); 
 

 
\t // build a scene 
 
\t var ourScene = new ScrollMagic.Scene({ 
 
\t \t triggerElement: '#project01' 
 
\t }) 
 
\t .setClassToggle('#project01', 'fade-in') // add class to project01 
 
\t .addIndicators({ 
 
\t \t name: 'fade scene', 
 
\t \t colorTrigger: 'black', 
 
\t \t indent: 200, 
 
\t \t colorStart: '#75C695' 
 
\t }) // this requires a plugin 
 
\t .addTo(controller);});

.project { 
 
    text-align: center; 
 
    opacity: 0; 
 
    transition: all 1s ease-out;} 
 
    .project.fade-in { 
 
    opacity: 1;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script> 
 

 

 
<div class="container porque" id="porque"> 
 
    <div class="row"> 
 
     <div id="project01" class="project"> 
 
     <div class="col-xs-12 text-center"> 
 
     <h1>¿Por qué solicitar un servicio Clens?</h1> 
 
     </div> 
 

 
     <div class="col-xs-12 porquearriba"> 
 
     <div class="col-xs-12 col-sm-4 text-center"> 
 
      <i class="fa fa-money fa-4x" aria-hidden="true"></i> 
 
      <h3>Precio óptimo</h3> 
 
      <p>Estamos muy seguros de que nuestros precios por el servicio de limpieza y calidad serán aceptados por usted.</p> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-4 text-center"> 
 
      <i class="fa fa-comments fa-4x" aria-hidden="true"></i> 
 
      <h3>Feedback activo</h3> 
 
      <p>Lo más importante para nosotros es la confianza de nuestros clientes.</p> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-4 text-center"> 
 
      <i class="fa fa-handshake-o fa-4x" aria-hidden="true"></i> 
 
      <h3>Personal amigable</h3> 
 
      <p>Trabajamos sólo con profesionales. Los proveedores de servicio siempre serán competentes, ordenados y corteses.</p> 
 
     </div> 
 
     </div> 
 

 
     <div class="col-xs-12 porqueabajo"> 
 
     <div class="col-xs-12 col-sm-4 text-center"> 
 
      <i class="fa fa-clock-o fa-4x" aria-hidden="true"></i> 
 
      <h3>Conveniencia</h3> 
 
      <p>Procederemos a limpiar tu hogar en la fecha y hora solicitada con máxima eficiencia</p> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-4 text-center"> 
 
      <i class="fa fa-star-o fa-4x" aria-hidden="true"></i> 
 
      <h3>Limpieza y orden</h3> 
 
      <p>Los proveedores de servicio siempre harán el mejor esfuerzo para satisfacer tus altos requerimientos y deseos en el mejor tiempo posible</p> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-4 text-center"> 
 
      <i class="fa fa-thumbs-o-up fa-4x" aria-hidden="true"></i> 
 
      <h3>Satisfacción</h3> 
 
      <p>El 90% de nuestros clientes valora nuestros servicios con 5 estrellas</p> 
 
     </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div>

Answer 1

귀하의 질문은 조금 이해하기 어렵지만, 아마도 이것이 당신이 찾고있는 무엇 :

당신은 당신의 장면에서 triggerHook를 사용하지 않았다. 기본적으로 triggerHook은 세로 가운데 미끄러 져 있습니다 (상단과 하단의 값은 0부터 1까지입니다).

$(document).ready(function() { 
 

 
    // Init ScrollMagic 
 
    var controller = new ScrollMagic.Controller(); 
 

 
    // build a scene 
 
    var ourScene = new ScrollMagic.Scene({ 
 
     triggerElement: '#project01', 
 
     triggerHook: 0 
 
    }) 
 
    .setClassToggle('#project01', 'fade-in') // add class to project01 
 
    .addIndicators({ 
 
     name: 'fade scene', 
 
     colorTrigger: 'black', 
 
     indent: 200, 
 
     colorStart: '#75C695' 
 
    }) // this requires a plugin 
 
    .addTo(controller); 
 
});

.project { 
 
    text-align: center; 
 
    opacity: 0; 
 
    transition: all 1s ease-out; 
 
} 
 

 
.project.fade-in { 
 
    opacity: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script> 
 

 

 
<div class="container porque" id="porque"> 
 
    <div class="row"> 
 
    <div id="project01" class="project"> 
 
     <div class="col-xs-12 text-center"> 
 
     <h1>¿Por qué solicitar un servicio Clens?</h1> 
 
     </div> 
 

 
     <div class="col-xs-12 porquearriba"> 
 
     <div class="col-xs-12 col-sm-4 text-center"> 
 
      <i class="fa fa-money fa-4x" aria-hidden="true"></i> 
 
      <h3>Precio óptimo</h3> 
 
      <p>Estamos muy seguros de que nuestros precios por el servicio de limpieza y calidad serán aceptados por usted.</p> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-4 text-center"> 
 
      <i class="fa fa-comments fa-4x" aria-hidden="true"></i> 
 
      <h3>Feedback activo</h3> 
 
      <p>Lo más importante para nosotros es la confianza de nuestros clientes.</p> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-4 text-center"> 
 
      <i class="fa fa-handshake-o fa-4x" aria-hidden="true"></i> 
 
      <h3>Personal amigable</h3> 
 
      <p>Trabajamos sólo con profesionales. Los proveedores de servicio siempre serán competentes, ordenados y corteses.</p> 
 
     </div> 
 
     </div> 
 

 
     <div class="col-xs-12 porqueabajo"> 
 
     <div class="col-xs-12 col-sm-4 text-center"> 
 
      <i class="fa fa-clock-o fa-4x" aria-hidden="true"></i> 
 
      <h3>Conveniencia</h3> 
 
      <p>Procederemos a limpiar tu hogar en la fecha y hora solicitada con máxima eficiencia</p> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-4 text-center"> 
 
      <i class="fa fa-star-o fa-4x" aria-hidden="true"></i> 
 
      <h3>Limpieza y orden</h3> 
 
      <p>Los proveedores de servicio siempre harán el mejor esfuerzo para satisfacer tus altos requerimientos y deseos en el mejor tiempo posible</p> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-4 text-center"> 
 
      <i class="fa fa-thumbs-o-up fa-4x" aria-hidden="true"></i> 
 
      <h3>Satisfacción</h3> 
 
      <p>El 90% de nuestros clientes valora nuestros servicios con 5 estrellas</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>