ScrollMagic淡入淡出场景

Question

当触发元素被激活时，我的html块会淡入，但当用户向后滚动触发器时也会淡出。我不想淡出。我想淡入并留在那里直到用户点击f5或重新加载页面。

＆＃13;

＆＃13;

    $(document).ready(function(){

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你的问题有点难以理解，但也许这就是你要找的东西：

您在场景中没有使用triggerHook。默认情况下，triggerHook位于垂直中间 - 我的片段中，我将其设置为顶部（值介于0和1之间，范围从窗口的顶部到底部）。

＆＃13;

＆＃13;

$(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);
});

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;