2

Saludos.

Esta es mi página:

http://feriapixel.cl/anchour/

Tengo un efecto con el método animate de JQuery, el cual hace que cuando hagas scroll hacia abajo en la página, la segunda sección suba de posición y se ponga sobre la primera, tapando el video; y lo otro que quiero que haga es que cuando vuelvas a subir con el scroll, la segunda sección vuelva a bajar y el video quede descubierto de nuevo (como al principio).

Estas 2 cosas las hace, el problema es que le toma demasiado tiempo hacerlas, sobretodo lo de volver, le toma demasiados segundos empezar a hacerlo, y me gustaría que el efecto ocurriese de inmediato y de forma fluída, que ocurra junto con el movimiento del scroll en la pantalla, no que se tome unos segundos de carga y luego lo haga.

Aquí está el código:

<script>
    $(window).scroll(function() {
    var height = $(window).scrollTop();

     if (height > 180) {
      $(".content-dos").animate({top : "0%"}, "slow");
      $(".beneficios").css("display" , "block");
    } else {
      $(".content-dos").animate({top : "70%"});
    }

    
  });
  </script>
html,
body {
  height: 100%;
}

body {
  font-size: 16px;
  font-family: "Oxygen", sans-serif;
  line-height: 1.5;
}

/* =============================================================================
  CONTENT
============================================================================= */
.content {
  position: relative;
  top: 30%;
  z-index: 2;
  margin: 0 auto;
  max-width: 720px;
  text-align: center;
}

.content-dos {
  position: relative;
  top: 70%;
  z-index: 2;
  margin: 0 auto;
  text-align: center;
  padding: 120px;
  color: #fff;
  background-color: #fff
}

.content-tres {
  z-index: 2;
  margin: 20px auto;
  text-align: center;
}
<body>

<div class="content-menu">
 <ul class="menu-top">
      <input type="checkbox" id="collapse"/> 
      <label for="collapse">Menú</label>    
             
      <li><a href="#">Inicio</a></li>
      <li><a href="#">Quiénes Somos</a></li>
      <li><a href="#">Contacto</a></li>
      <li><a href="#">Portafolio</a></li>
    </ul>
</div>  
<div class="content">

  <h1 class="content__heading">FERIA PIXEL</h1>
  <p class="content__teaser">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit qui voluptatum enim est deserunt assumenda, aspernatur quam aperiam!</p>
  <a href="#" class="content__cta">Ver Video</a>
  <a href="#" class="content__cta">Portafolio</a>
  
</div><!-- /content -->

<video id="my-video" class="video" muted loop>
  <source src="videos/Vbg_mp4.mp4" type="video/mp4">
  <source src="videos/Vbg_webmsd.webm" type="video/webm">
</video><!-- /video -->

<!--<div class="content-dos parallax-window " data-parallax="scroll" data-image-src="img/ref-2725055.png" >
   <div class="row ">
     <div class="col-sm-6">
       <h2 class="intro_headline">
         Anchour is a branding agency based in Maine.
       </h2>
     </div>
     <div class="col-sm-6 intro_content">
       We believe that truly impactful brands inspire their audiences to action, to dream, to change; they leave an impression on their audiences and wield genuine influence. Creating work like this is our passion, it’s what brought us together, and it’s what keeps us moving forward.
     </div>
   </div>
 
</div>
-->
<div class="content-dos">
  <div class="container">
    <div class="row">
      <div class="col-sm-4">
      <div class="row">
        <div class="col-sm-2">
        <span class="glyphicon glyphicon-home beneficios"></span>
        </div>
        <div class="col-sm-10">
        <h4 >Design To Brag About</h4>
        <p>Phasellus enim libero, blandit vel sapien vitae, condimentum ultricies magna et. Quisque euismod orci ut et lobortis aliquam. Aliquam in tortor enim.</p>
        </div>
      </div>
      </div>
      <div class="col-sm-4">
      <div class="row">
        <div class="col-sm-2">
        <span class="glyphicon glyphicon-home beneficios"></span>
        </div>
        <div class="col-sm-10">
        <h4 >Design To Brag About</h4>
        <p>Phasellus enim libero, blandit vel sapien vitae, condimentum ultricies magna et. Quisque euismod orci ut et lobortis aliquam. Aliquam in tortor enim.</p>
        </div>
      </div>
      </div>
      <div class="col-sm-4">
      <div class="row">
        <div class="col-sm-2">
        <span class="glyphicon glyphicon-home beneficios"></span>
        </div>
        <div class="col-sm-10">
        <h4 >Design To Brag About</h4>
        <p>Phasellus enim libero, blandit vel sapien vitae, condimentum ultricies magna et. Quisque euismod orci ut et lobortis aliquam. Aliquam in tortor enim.</p>
        </div>
      </div>
      </div>
    </div>
    <div class="row segunda-fila">
      <div class="col-sm-4">
      <div class="row">
        <div class="col-sm-2">
        <span class="glyphicon glyphicon-home beneficios"></span>
        </div>
        <div class="col-sm-10">
        <h4 >Design To Brag About</h4>
        <p>Phasellus enim libero, blandit vel sapien vitae, condimentum ultricies magna et. Quisque euismod orci ut et lobortis aliquam. Aliquam in tortor enim.</p>
        </div>
      </div>
      </div>
      <div class="col-sm-4">
      <div class="row">
        <div class="col-sm-2">
        <span class="glyphicon glyphicon-home beneficios"></span>
        </div>
        <div class="col-sm-10">
        <h4 >Design To Brag About</h4>
        <p>Phasellus enim libero, blandit vel sapien vitae, condimentum ultricies magna et. Quisque euismod orci ut et lobortis aliquam. Aliquam in tortor enim.</p>
        </div>
      </div>
      </div>
      <div class="col-sm-4">
      <div class="row">
        <div class="col-sm-2">
        <span class="glyphicon glyphicon-home beneficios"></span>
        </div>
        <div class="col-sm-10">
        <h4 >Design To Brag About</h4>
        <p>Phasellus enim libero, blandit vel sapien vitae, condimentum ultricies magna et. Quisque euismod orci ut et lobortis aliquam. Aliquam in tortor enim.</p>
        </div>
      </div>
      </div>
    </div>
  </div>
</div>
<div class="content-tres">
<!--
  <div class="row">

</div>


http://feriapixel.cl/anchour/

Probé sin usar animate de Jquery, sólo css, Mi código quedó así:

$(document).ready(function(){
   $(window).scroll(function() {

         if($(document).scrollTop() >= 80) {

        
          $(".content-dos").addClass("test");

        } else {

          $(".content-dos").removeClass("test");

        }

      });
});

Y funciona todo tal como quiero. ¿Hay alguna forma de ponerle alguna transición con css ya que el método animate de Jquery no me está funcionando como quiero?

2 respuestas 2

0

Si lo que quieres es añadir una transición con un tiempo, simplemente tienes que añadir en tu CSS en la clase del elemento que quieres mover, lo siguiente:

-webkit-transition: all 0.5s;     /* Safari */
-moz-transition: all 0.5s;         /* Mozilla Firefox */
-o-transition: all 0.5s;               /* Opera */
transition: all 0.5s;

Si quieres añadir distintos efectos en la transición, es decir, la velocidad de la transición varie a la vez que esta actúa, añade uno de los efectos que tu prefieras:

    linear
    ease
    ease-in
    ease-out
    ease-in-out

/* Hay algunos más, pero yo te pongo esos como base */

Aquí te dejo la documentación sobre esto: CSS3 Tiempo de transición - Propiedad de la función -

Ejemplo:

-webkit-transition: ease 0.5s;     /* Safari */
-moz-transition: ease 0.5s;         /* Mozilla Firefox */
-o-transition: ease 0.5s;               /* Opera */
transition: ease 0.5s;

Esto hará que cuando tú llamas a la nueva clase desde tu código, aplique el tiempo de transición que tenía el elemento sin esa clase.

De todos modos te recomiendo que te leas esta documentación sobre las transiciones: CSS3 Transitions

2
  • ¡Muchas gracias! ahora el efecto funciona tal como quiero. feriapixel.cl/anchour No tenía idea que se podía usar la palabra "all" en las transiciones. La verdad es que ya había estudiado las transiciones en w3schools.com, pero ahí todos los ejemplos eran con un atributo en específico, como por ejemplo: width, y siempre me quedaba la duda de qué podía hacer si quería más efectos. Commented el 3 nov. 2016 a las 16:58
  • 1
    Me alegro de que te haya funcionado! Si te ha servido de ayuda vota positivamente mi respuesta. Gracias! De antemano te comunico que no tienes que poner la función 'all' con que no pongas nada aplicará la transición también a todo! Prueba a aplicar también la función de ease para dar efectos mas personalizados a la transición.
    – lromeraj
    Commented el 3 nov. 2016 a las 17:10
0

Creo que estas sobrecargando el Dom con el evento Scroll, te explico porque:

tengo una teoria.

Primero hay que tener en cuenta que que el evento scroll, se ejecuta muchas veces cuando haces scroll (esa es precisamente su función) PERO!!! no hay que abusar de el, teniendo en cuenta la concurrencia de ejecución hay que hacer el minimo de tareas posibles y procurar que se terminen rapido.

para este caso tienes un condicional, es decir o pasa uno o pasa el otro. eso hace que en cada "scroll" se ejecute una animación obligatoriamente.

$(window).scroll(function() {
    var height = $(window).scrollTop();

     if (height > 180) {
      $(".content-dos").animate({top : "0%"}, "slow");
      $(".beneficios").css("display" , "block");
    } else {
      $(".content-dos").animate({top : "70%"});
    }


  });

mi recomendación es, un mejor control. algo así:

var control = true;

    var control = true;
 $(window).scroll(function() {

    var height = $(window).scrollTop(); 
    if (height > 180) {
      if(!control){
        $(".content-dos").animate({top : "0%"}, "slow");
        $(".beneficios").css("display" , "block");
        control = true;
      }
    } else {
      if(control){
        $(".content-dos").animate({top : "70%"});
        control = false;
      }
    }            
});

no lo he probado, pero creo que podria funcionar, solo queria explciarte la idea.

Saludos.

6
  • Acabo de probar tu código y ahora no hace absolutamente nada, no responde, no se mueve. Commented el 31 oct. 2016 a las 23:09
  • Tienes que empezar a hacer pruebas pequeñas para ir avanzando, por ejemplo quita el "else", y prueba a ver si sigue lento. En el código quedó algo mal, la reasignación de la variable debe ser al revez. igual como te dije, no lo he probado.
    – Alfredo Gt
    Commented el 31 oct. 2016 a las 23:45
  • Otra prueba que puedes hacer es quitar la animación. yo sigo insistiendo que debe ser por la cantidad de llamados al evento. Prueba y nos cuentas, saludos.
    – Alfredo Gt
    Commented el 31 oct. 2016 a las 23:47
  • No sé si sirva, pero el efecto está acá en este theme de Wordpress, quiero hacer lo mismo que ahí: themenectar.com/demo/salient-frostwave Commented el 1 nov. 2016 a las 16:00
  • entiendo, pero ese efecto es un poco diferente. porque el div se reduce o aumenta con el scroll y no en una posición específica. debes cambiar la función para modificar el tamaño de tu div de acuerdo a la posición del scroll. y cuando llegue al tamaño deseado bloqueas las acciones.
    – Alfredo Gt
    Commented el 1 nov. 2016 a las 16:05

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.