Crear parallax con JavaScript y Atropos

En este artículo veremos qué son y como crear incríbles efectos parallax con JavaScript y la librería Atropos. Aprende a darle a los estados de hover una nueva dimensión.

https://atroposjs.com/ “Atropos is a lightweight, free and open-source JavaScript library to create stunning touch-friendly 3D parallax hover effects.

See the Pen Crear efecto parallax con JavaScript y Atropos by Danivalldo (@Danivalldo) on CodePen.

¿Quieres aprender a hacer este ejercicio? Saltar directamente al tutorial

Crea un parallax para simular profundidad

Uno de los recursos más utilizado a lo largo de la historia de la animación es sin duda el efecto “parallax”. Una sencilla técnica que consiste principalmente en desplazar diferentes capas a distintas velocidades, para generar así una sensación de profundidad. Simulando la experiencia que tenemos, por ejemplo, al viajar en tren y mirar a través de la ventana.

Por supuesto, este efecto también ha sido adoptado en el desarrollo de aplicaciones web, y es justamente ahí donde entra Atropos.

Con Atropos, podemos componer distintos elementos HTML dentro de un contenedor. Éste actuará como “ventana” de la escena. Y responderá tanto al movimiento del cursor como a los gestos táctiles para dispositivos móviles.

El desarrollador detrás de esta librería es Vladimir Kharlampidi. Creador del conocido Framework7 y Swiper, un framework de desarrollo de webapps y una librería de creación de sliders respectivamente.

En el momento de hacer este vistazo, el repositorio en Github de Atropos tiene alrededor de 1k estrellas. Una vez importado en nuestro proyecto, mediante el comando “npm i atropos –save”, podemos ver que su versión compilada no ocupa más de 34Kb.

El primer ejemplo que se nos muestra en la home de la página web, ya deja claro el enorme potencial de esta microlibrería. Lo que en un inicio parecía un simple banner introductorio, se convierte en una escena tridimensional que flota y reacciona a nuestra interacción.

Atropos dedica especial atención a los detalles

Es especialmente llamativo, la atención a los detalles que Vladimir puso en la creación de esta librería. Elementos como la sutil sombra que aparece detrás del elemento en cuestión. Los tiempos de animación de respuesta en la interacción. E incluso, en algunos de los otros ejemplos de la página, se puede apreciar una luz “especular” que le otorga un acabado plástico elemento web.

Siguiendo paso a paso la documentación, vemos que implementar esta librería no supone, a priori, un quebradero de cabeza. Hay que tener en cuenta principalmente los siguientes factores.

En primer lugar, la librería JS va asociada a una hoja de estilos, y es imprescindible que la importemos en nuestro entorno. Mediante import, o con una etiqueta «link», todo depende de la configuración de nuestro entorno de desarrollo.

A continuación, hay que generar una estructura HTML específica para aquellos elementos que queremos dotar del efecto de parallax, ésta estructura está compuesta por elementos HTML anidados con las siguientes clases CSS obligatorias “.atropos > .atropos-scale  > .atropos-rotate > .atropos-inner”, ya dentro de este último contenedor, podemos crear el contenido que queramos.

Para inicializar el efecto, pasamos un objeto JSON con la propiedad “el”, un simple selector CSS. Éste tiene que apuntar al elemento HTML de mayor nivel, en la estructura descrita anteriormente.

Por supuesto, para personalizar los acabados y funcionalidades a nuestro criterio, se puede acompañar la propiedad ”el” con otros parámetros de configuración. E incluso, importar la librería Lil-Gui, para ajustar dichos parámetros a través de una interfaz gráfica, como ya vímos en su momento

Finalmente, cabe destacar que el control sobre el orden de las distintas capas que componen nuestra escena, se realiza mediante la definición del atributo data-atropos-offset. Cuyos valores definirán la profundidad de cada una de ellas, admitiendo incluso valores negativos.

¿Como implementar pallarax con JavaScript y Atropos?

Crearemos nuestro efecto parallax mediante JavaScript y Atropos, siguiendo paso a paso el siguiente tutorial.

En primer lugar crearemos un “layout” base en HTML. Como vemos a continuación, consta de cinco elementos “div”, con unas clases CSS imprescindibles. En el nivel mas bajo, añadimos un conjunto de imágenes con diferentes offsets.

<div class="atropos my-atropos">
      <div class="atropos-scale">
        <div class="atropos-rotate">
          <div class="atropos-inner">
            <div class="atropos-content-container">
              <img src="imgs/bg.svg" data-atropos-offset="0" />
              <img src="imgs/stars.svg" data-atropos-offset="7" />
              <img src="imgs/moon.svg" data-atropos-offset="6" />
              <img src="imgs/mountains.svg" data-atropos-offset="2" />
              <img src="imgs/clouds.svg" data-atropos-offset="5" />
              <img src="imgs/ground.svg" data-atropos-offset="0" />
              <img src="imgs/tree.svg" data-atropos-offset="1" />
              <img src="imgs/leafs.svg" data-atropos-offset="5" />
            </div>
          </div>
        </div>
      </div>
    </div>

En este ejemplo se utiliza SCSS para definir estilos. Sin embargo, estos estilos són muy simples.

Importamos los estilos de la propia librería.

@import "atropos/scss";

Definimos el tamaño de el contenedor principal con variables.

$containerWidth: 470px;
$containerIllustrationWidth: 541px;
$gapWidth: -1 * (($containerIllustrationWidth - $containerWidth)/ 2);
$containerHeight: 440px;
$containerIllustrationHeight: 606px;
$gapHeight: (-1 * (($containerIllustrationHeight - $containerHeight)/ 2)) + 45;

Y anidamos estilos, para cada elemento del DOM.

html {
  height: 100%;
  body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-image: url("../imgs/polaroid.svg");
    background-size: $containerIllustrationWidth $containerIllustrationHeight;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #575398;
    .my-atropos {
      width: $containerWidth;
      height: $containerHeight;
      margin-top: -100px;
      border-radius: 10px;
      .atropos-content-container {
        height: 100%;
        position: relative;
        [data-atropos-offset] {
          position: absolute;
          width: $containerIllustrationWidth;
          height: $containerIllustrationHeight;
          height: 606px;
          left: $gapWidth;
          top: $gapHeight;
        }
      }
    }
  }
}

Ejecutar Atropos no podría resultar más sencillo. Importamos la librería, y a continuación instanciamos el objeto, pasando el selector del elemento de inicio.

import Atropos from "atropos";
const myAtropos = Atropos({
  el: ".my-atropos",
});

Como recurso adicional, si tienes interés en ver una librería que facilita la creación de interacciones similares a la de este ejemplo, te recomiendo pasarte por este artículo.

Soprende a tus usuarios con efectos visuales

A pesar de que Atropos no inventa nada nuevo, ofrece la posibilidad de implementar cómodamente un efecto muy visual. Por mi experiencia, cuando se usa bajo un criterio estético adecuado, el efecto parallax puede ser un elemento de gran impacto en una aplicación.

En términos generales, Atropos, se integra de forma sencilla en cualquier proyecto front-end. De hecho, incluso da soporte a otras librerías y frameworks, como React, Vue o Svelte. Sin embargo, en su forma “vanillaJS”, requiere de preparar demasiados elementos HTML como layout base para poder funcionar correctamente.

A pesar de eso, crear efectos parallax con JavaScript y Atropos, no podría resultar más fácil. En cierto modo, me recuerda a CanvasConfetti, otra librería para generar un efecto sorprendente, y que ya vimos por aqui.

Este ha sido un pequeño vistazo a la librería Atropos. A continuación os dejo enlaces a más recursos, así como el ejercicio subido al repositorio de Github de “Librerías Js”.

Nos vemos pronto, un abrazo desarrolladores!

Deja un comentario