Sequence.js: control deslizante de contenido receptivo con transiciones CSS3 y control de gestos

Los complementos para controles deslizantes de contenido son una moneda de diez centavos por docena, peces en el mar, lo que sea. Menos, pero todavía muchos admiten transiciones CSS3 y funcionan de manera receptiva. De todos modos, «Sequence.js» es algo especial. Este JavaScript no solo admite animaciones en la transición de diapositivas en su conjunto. En cambio, todo el contenido de una diapositiva, ya sean titulares o imágenes, se puede animar individualmente. Al ser una herramienta web de primer nivel, «Sequence.js» incluso admite el control de gestos para que también se pueda usar intuitivamente en teléfonos inteligentes y tabletas. Ahora dígame, ¿no establece esto el control deslizante de contenido receptivo lo suficientemente lejos como para justificar una mirada más cercana?

Sequence.js: listo al instante para el horario de máxima audiencia gracias a los temas listos para usar

Empezando con «secuencia.js“Es bastante fácil. El paquete de descarga contiene varios temas listos para usar para darle una ventaja inicial. Todos los temas requieren jQuery, que viene incluido e integrado con cualquier tema. Es posible que haya adivinado que «Sequence.js» también tendrá que estar incrustado. Una vez hecho esto, podemos llamar al complemento y adjuntarlo a un elemento.

var slider = $("#slider").sequence({
  nextButton: true,
  prevButton: true
}).data("sequence");

En nuestro ejemplo, elegimos el elemento con el ID „deslizador“ y le agregamos la función „secuencia()“. Adicionalmente podríamos definir un conjunto de parámetros. En nuestro ejemplo, integramos botones para navegar hacia adelante y hacia atrás. La documentación explica más parámetros. También puede cambiar el aspecto y el comportamiento mediante el uso de parámetros. Los temas han sido diseñados para llamar al complemento y sus parámetros a través de un archivo JavaScript externo.

Uno de los temas gratuitos de „Sequence.js“

Además del JavaScript, cada tema viene con una hoja de estilo que define el diseño y las transiciones animadas de cada diapositiva y su contenido.

Sequence.js: animando contenidos de diapositivas individuales

Usando CSS, podemos ajustar las formas en que se animan los contenidos de las diapositivas individuales. Cada elemento que se va a animar se equipa con dos estados, definidos a través de CSS. El primer estado define el aspecto antes de que comience la animación y el segundo estado muestra el elemento después de que finaliza la animación. El segundo estado se define al adjuntarle la clase «animate-in».

#slider img.portrait {
  opacity: 0;
  transform: translateX(-100px);
}

#slider .animate-in img.portrait {
  opacity: 1;
  transform: translateX(0)
  transition-duration: 1s;
}

En nuestro ejemplo, hacemos que una imagen sea invisible al establecer la «opacidad» en cero. Tan pronto como se llama a la diapositiva que contiene esa imagen, se adjunta la clase «animate-in». El elemento de imagen luego CSS3 pasará al segundo estado. Paralelamente, la imagen se mueve 100 píxeles a la derecha. Imagina qué tipo de animaciones eres capaz de definir de esa manera. El HTML del contenedor se compone de un contenedor que lleva una lista desordenada. Los elementos individuales „

<div id="slider">
  <ul>
    <li class="animate-in">
      <p>Hello.</p>
    </li>
    <li>
      <img src="https://www.noupe.com/development/portrait.jps" class="portrait" />
    </li>
  </ul>
</div>

<div id="slider">
  <img src="https://www.noupe.com/development/next.png" class="sequence-next" />
  <img src="back.png" class="sequence-prev" />
  <ul>
  …
  </ul>
</div>