Efecto parallax

Curso de Javascript Online. Desde cero.

14.  
19.  
25.  
34.  

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

Efecto parallax sin plugin

<style type="text/css">
body{margin:0; background: url(pera.png) fixed;}
.pinas_and_oranges{ position: fixed; width: 100%; height: 1800px; }
.contentLayer{ position: absolute; width: 100%; height: 500px; }
#pinas{ background: url(pina.png) 100px 200px; }
#oranges{ background: url(orange.png) 50px 200px; }
#whiteLayer{top:500px; background: white }
#greenLayer{ top:2500px; background: green}
</style>
<script type="text/javascript">
function parallax(){
 pinas.style.top = -(window.pageYOffset/5)+"px";
 oranges.style.top = -(window.pageYOffset/2)+"px";
}
function start(){
 pinas = document.querySelector("#pinas");
 oranges = document.querySelector("#oranges");
}
window.addEventListener("scroll", parallax);
window.addEventListener("load", start);
</script>
<div id="pinas" class="pinas_and_oranges"></div>
<div id="oranges" class="pinas_and_oranges"></div>
<div id="whiteLayer" class="contentLayer"></div>
<div id="greenLayer" class="contentLayer"></div>

Efecto parallax con el plugin ScrollMagic.js

Scroll Magic es un gran plugin de Javascript que nos permitirá gestionar nuestro efecto parallax añadiendo cientos de opciones de configuración de manera sencilla.

<style>
    #animate {
        background-color: red;
        width: 100px;
        height: 100px;
    }

    .extender { min-width: 500px; }

    .box { height: 100vh; }
</style>
<div class="box"></div>

<div id="animate" class="trigger"></div>

<div class="box"></div>
<script src="./js/ScrollMagic.min.js"></script>
<script src="./js//debug.addIndicators.min.js"></script>
<script src="./js/TweenMax.min.js"></script>
<script src="./js/animation.gsap.min.js"></script>

<script>
const controller = new ScrollMagic.Controller();

// Cuando el objeto .trigger pasa por el trigger marcador se detona la animación tween
const scene = new ScrollMagic.Scene({ triggerElement: ".trigger", duration: 200, offset: -50 })
.setTween("#animate", 1, { className: "+=extender" })
.addIndicators({ name: "marcador" })
.addTo(controller);
</script>

Ejecutar funciones cuando cierto elemento pase por cierta zona

var scene = new ScrollMagic.Scene({triggerElement: "#trigger", duration: 200})
.addTo(controller)
.addIndicators() // add indicators (requires plugin)
.on("update", function (e) {
    document.querySelector(("#scrollDirection").textContent = e.target.controller().info("scrollDirection");
})
.on("enter leave", function (e) {
    document.querySelector("#animate").textContent = e.type == "enter" ? "inside" : "outside";
})

Consejos para realizar el efecto Parallax:

  • Para hacer la composición, utilizaremos position:absolute para cada una de las piezas y position:relative, para la capa que las envuelve.
  • Para que todo se reescale correctamente en un dispositivo móvil, daremos un width, un left y un top en porcentaje a cada una de las piezas. No asignaremos un height a las piezas para que estas se reescalen proporcionalmente.
  • Para lograr el desplazamiento de las piezas al producirse el efecto parallax añadiremos dinámicamente un class. Este class (.extender, por ejemplo) añadirá transform:translate en lugar de un nuevo top o left a las piezas. De esta forma, si desplazamos la pieza desde su posición original, la posición final de la misma también cambiará, mientras que usando los estilos top y left tendré que modificar tanto la posición original como la final.
  • Suele ser recomendable separar el elemento que servirá de trigger del elemento que queremos animar, ya que de lo contrario, al desplazar el elemento que queremos animar, también estaremos desplazando el trigger y el rango de la animación se redefinirá constantemente.
  • Para que al visualizar la versión móvil se mantenga la proprción del div con position:relative, podremos utilizar el siguitente script:
const maintainAspectRatio = () => {
    document.querySelectorAll('.back').forEach( obj => {
        const w = obj.getBoundingClientRect().width;
        const h = w/1.15;
        obj.style.height = h+'px';
    });
}

maintainAspectRatio();
window.addEventListener('resize', maintainAspectRatio);

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.