ScrollMagic Fade Scene

Question

當觸發元素被激活時，我的html塊會淡入，但當用戶回滾過觸發器時也會淡出。我不想淡出。我想淡入，直到用戶點擊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位於垂直中間 - inmy片段中，我將它設置在頂部（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>