Explorando la web, encontré este sorprendente efecto en este sitio http://www.guglieri.com/ (el efecto de desplazamiento) Quiero construir un script que recree el mismo efecto pero no entiendo el comportamiento lógico.
Básicamente, comencé a calcular la altura del cuerpo configurando la propiedad de posición de cada sección en "absoluto" y sumando la altura del cuerpo a la altura de cada sección.
Ahora, la idea es guardar en una matriz el desplazamiento de cada uno y, cuando el scrolltop es mayor o igual a este desplazamiento... empiezo a mover la sección hacia arriba a través de la propiedad translateY y dejo de moverme cuando es igual al altura de la ventana. ¡¡Pero ahora estoy atascado!!
Busqué en Google un complemento ya existente pero no encontré nada. Así que por favor ayúdame a encontrar una solución;)
Concepto aquí:
var body = $('body') section = $('section'); section.each(function(i,el){ $(el).css({ 'z-index' : section.length - i }) body.height(body.height()+$(el).height()); }); body { margin: 0; } section { width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; font-family: sans-serif; } section.a { background-color:indianred } section.b { background-color:royalblue } section.c { background-color:deepskyblue } section.d { background-color:tomato; } section div { position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); font-size: 6em; color: #FFF; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <section class="a"> <div>a</div> </section> <section class="b"> <div>b</div> </section> <section class="c"> <div>c</div> </section> <section class="d"> <div>d</div> </section>Es efecto de paralaje.
Aquí hay un script de paralaje simple: http://pixelcog.github.io/parallax.js/
Hay otros scripts más en la web, también tutoriales sobre cómo hacer tu propio efecto de paralaje según tus necesidades.
Puedes probar pagePiling.js , pero la diferencia es que este usa el desplazamiento automático.
Se puede lograr un efecto similar usando la extensión de paralaje fullPage.js con las opciones offset:100 autoScrolling:false .