javascript - scrolling - simple parallax css
Javascript: desplazamiento suave de la paralaje con la rueda del mouse (5)
Tengo una página donde aplico un efecto de paralaje. Esto se logra utilizando translate3d. Ahora, mientras esto funciona bien, me pregunto cómo puedo anular los "pasos" predeterminados al desplazarme con la rueda del mouse.
Si me desplazo con las barras de desplazamiento, todo está bien. Pero con la rueda del ratón, todo está nervioso.
Estoy haciendo esto de una manera bastante directa:
var prefix = Modernizr.prefixed(''transform'');
$window.on(''scroll'', function(){
var scroll_top = $window.scrollTop();
if(scroll_top < forside_infographics_offset){
$_(''#slider'').css(prefix , "translate3d(0,"+(scroll_top/3)+"px,0)");
}
});
Ahora, he visto este sitio donde el desplazamiento es súper suave, también con una rueda de ratón con pasos en él. He intentado mirar el código, y parece que está usando requestAnimationFrame , pero no estoy seguro de cómo logra este efecto de desplazamiento exacto.
¿Algunas ideas?
Edit: Mientras probaba, descubrí que esto tiene un error significativo. Si bien mi versión se comporta (en mi opinión) mucho mejor que el código original, desafortunadamente no tiene en cuenta el desplazamiento por otros medios (barra de desplazamiento / clic central y arrastre). Desplazarse por uno de estos métodos y luego desplazarse con la rueda del mouse hace que vuelva a la ubicación de desplazamiento en la que se encontraba la última vez que desplazó la rueda del mouse. Voy a actualizar cuando desarrolle una solución a esto.
La solución referenciada de Kenny fue un buen enfoque, pero su funcionalidad me volvió loco. Si mueves la rueda rápidamente, no se movería mucho más rápido.
Lo mejoré de tal manera que se desplaza una distancia dada por clic independientemente de la velocidad de giro de la rueda del mouse.
La razón por la que su respuesta no fue así es porque si se desplaza la rueda una segunda vez antes de que se complete la primera animación, la nueva altura de desplazamiento es solo la altura de desplazamiento actual más la cantidad de desplazamiento por rueda. (Entonces, si el tiempo de desplazamiento es de .5 segundos y se desplaza una segunda vez después de .25 segundos, entonces se desplazará 1.5 veces la distancia de desplazamiento de la rueda en lugar de 2 veces esa distancia)
Es tarde en la noche, espero que tenga sentido.
Regradless aquí está mi código:
Bibliotecas requeridas
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js"></script>
Código de desplazamiento
<script>
$(function(){
var $window = $(window)
var $scoll = $(''#page-container'')
var scrollTime = 0.5
var scrollDistance = 120
var scrollTop = $scoll.scrollTop()
$window.on("mousewheel DOMMouseScroll", function(event){
event.preventDefault()
var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3
scrollTop = scrollTop - parseInt(delta*scrollDistance)
scrollTop = Math.max(0, Math.min($scoll[0].scrollHeight, scrollTop))
TweenMax.to($scoll, scrollTime, {
scrollTo : { y: scrollTop, autoKill:true },
ease: Power1.easeOut,
overwrite: 5
})
})
})
</script>
Después de investigar mucho, encontré una solución bastante fácil :) http://bassta.bg/demos/smooth-page-scroll/
Curiosamente, no tuve que alterar mi código existente en absoluto. Esto anula el comportamiento de desplazamiento predeterminado, mientras deja el evento abierto para que lo use como lo haría normalmente.
El desplazamiento mediante la rueda del ratón requiere un manejo especial. El motivo por el que cada rueda del mouse se desplaza no desplaza el contenido una cierta cantidad de píxeles. Cada desplazamiento hace que su página salte y luego cada salto da lugar a la animada animación "nerviosa" cuando la imagen de fondo intenta posicionarse en estos saltos.
El uso de una biblioteca resolverá el problema la mayor parte del tiempo, pero también vale la pena entender qué problemas está tratando de resolver debajo del capó.
Solo para fines de referencia, los eventos del mouse son mousewheel y DOMMouseScroll
Este complemento para Chrome proporciona la funcionalidad necesaria para esto. Alguien creó una esencia con una versión minificada de ella . Es de una versión bastante antigua, pero creo que está bien porque, como he comprobado, la última versión del complemento agrega demasiadas cosas.
Un par de cosas con esa esencia, sin embargo:
- Comprueba si el navegador es Chrome antes de iniciar.
- Se inicia automáticamente.
- Utiliza jQuery.
Así que me dejo crear una version que aborde esos puntos. Simplemente agregue el script y llame a SmoothScroll.init() para comenzar.
Gran pregunta
La biblioteca que uso es la siguiente: https://github.com/cferdinandi/smooth-scroll
Simplemente incluya el archivo smoothscroll.js y el trabajo realizado. La rueda del ratón ahora se deslizará fácilmente por la página, en lugar de saltar en trozos de píxeles.
Realmente mejora el aspecto de las páginas web de paralaje.
Por cierto, para las imágenes de paralaje, uso esta biblioteca:
https://github.com/pederan/Parallax-ImageScroll
Es muy fácil de agregar a una página web, solo recuerda incluir e inicializar esta biblioteca en la parte inferior de tu página web, después de tus imágenes y HTML.
(No me di cuenta de que esto haría una diferencia, ¡pero absolutamente lo hace!)