Vinculación de animaciones/transformaciones CSS3 con evento de desplazamiento

Question

Estoy buscando una forma de vincular las transiciones CSS3 a un evento de desplazamiento. Estoy buscando una funcionalidad similar a http://nizoapp.com/, donde ciertos elementos se moverían cuando se llega a un cierto punto de desplazamiento en la página. Sé que tendrías que llamar al evento de desplazamiento con jQuery (usando desplazamiento y desplazamiento), pero tengo curiosidad de saber si hay una manera de utilizar CSS3 para la parte de animación o si es necesario hacerlo en jQuery. De cualquier manera, me gustaría algo de ayuda sobre cómo comenzar a hacer que esto funcione. Gracias por la ayuda.

Answer 1

Un buen punto de partida podría ser the jQuery Waypoints plugin. Hace que sea fácil ejecutar una función cada vez que se desplaza a un elemento, y también puede aplicar clases en función de lo que está actualmente a la vista. A continuación, puede utilizar esos para activar las animaciones CSS que está buscando.

ACTUALIZACIÓN - Acabo de encontrar the Scrollorama jQuery plugin. El autor afirma que no ha sido probado exhaustivamente, pero está diseñado para hacer exactamente lo que está buscando, y definitivamente parece un buen punto de partida.

Answer 2

No hay forma de vincular un CSS específico a una posición de desplazamiento. Deberá incluir algo de pegamento de JavaScript para lograr ese efecto. Mi método favorito es enlazar al evento ventana onscroll y poner allí su código de animación.

Answer 3

Estoy usando el método scrollTop().

Esto añadir o eliminar una clase con mis propiedades CSS animados

$(window).scroll(function (event) { 
    var y = $(this).scrollTop(); 

    if (y <= 300) { 
     $('#my-div').addClass('animate'); 
    } 
    else 
    { 
     $('#my-div').removeClass('animate');     
    } 
}); 

en html:

<div id="my-div"> 
    <p>Lorem ipsum dolor sit amet</p> 
</div> 

en css:

#my-div { 
    width:200px; 
    height:200px; 
    background-color:red; 
} 
#my-div.animate { 
    transition: rotate(30deg); 
}