Animaciones de Entrada

Descubre las Animaciones de Entrada automáticas en Quickly,, que se activan al cargar la página para transformar tu diseño con efectos visuales dinámicos como fade, flip y zoom. Implementadas fácilmente con los atributos [data-Qy-r] y [data-Qy-rb], estas animaciones añaden una capa de sofisticación a tu sitio, haciendo que cada transición sea suave y atractiva.

Enlace al CDN

Para integrar las animaciones de entrada en tu proyecto, deberás incluir los enlaces a los CDN correspondientes.

Detalle CDN URL
CSS Animación https://cdn.jsdelivr.net/gh/QuicklyCSS/Quickly@main/dist/v-1/css/quicklyAnimation.min.css
JS Animación https://cdn.jsdelivr.net/gh/QuicklyCSS/Quickly@main/dist/v-1/js/quicklyAnimation.min.js

Animaciones Run y Run Back

Las animaciones de una sola ejecución, denominadas Run, se activan cuando el objeto tiene un 10% de su contenido dentro del viewport y se controlan mediante el atributo `[data-Qy-r]`.

Las animaciones de ejecución múltiple, llamadas Run Back, se activan mediante el atributo `[data-Qy-rb]` y se ejecutan de ida y vuelta al realizar scroll hacia arriba o abajo.

En tu proyecto, puedes combinar ambos tipos de atributos "Run y Run Back" con las clases para crear animaciones y lograr que tu diseño sea más dinámico.

.fade-Opción

Clase Descripción
.fade-up Aparece gradualmente mientras se mueve hacia arriba.
.fade-down Aparece gradualmente mientras se mueve hacia abajo.
.fade-right Aparece gradualmente mientras se mueve hacia la derecha.
.fade-left Aparece gradualmente mientras se mueve hacia la izquierda.
.fade-up-right Aparece gradualmente mientras se mueve hacia arriba y a la derecha.
.fade-up-left Aparece gradualmente mientras se mueve hacia arriba y a la izquierda.
.fade-down-right Aparece gradualmente mientras se mueve hacia abajo y a la derecha.
.fade-down-left Aparece gradualmente mientras se mueve hacia abajo y a la izquierda.
HTML 
                  
    <!-- Animación Run -->
    <section data-Qy-r="fade-up">
        <h2>Título</h2> 
    </section>

    <!-- Animación Run Back -->
    <section data-Qy-rb="fade-up">
        <h2>Título</h2> 
    </section>

.flip-Opción

Clase Descripción
.flip-left Rota el elemento 90 grados hacia la izquierda en el eje Y.
.flip-right Rota el elemento 90 grados hacia la derecha en el eje Y.
.flip-up Rota el elemento 90 grados hacia arriba en el eje X.
.flip-down Rota el elemento 90 grados hacia abajo en el eje X
HTML 
    
    <!-- Animación Run -->                                              
    <section data-Qy-r="flip-left">
        <h2>Título</h2> 
    </section>

    <!-- Animación Run Back -->
    <section data-Qy-rb="flip-left">
        <h2>Título</h2> 
    </section>

.zoom-Opción

Clase Descripción
.zoom-in Amplía el elemento mientras aumenta su tamaño.
.zoom-in-up Amplía el elemento y lo mueve hacia arriba.
.zoom-in-down Amplía el elemento y lo mueve hacia abajo.
.zoom-in-left Amplía el elemento y lo mueve hacia la izquierda.
.zoom-in-right Amplía el elemento y lo mueve hacia la derecha.
.zoom-out Reduce el tamaño del elemento mientras lo aleja.
.zoom-out-up Reduce el tamaño del elemento y lo mueve hacia arriba.
.zoom-out-down Reduce el tamaño del elemento y lo mueve hacia abajo.
.zoom-out-left Reduce el tamaño del elemento y lo mueve hacia la izquierda.
.zoom-out-right Reduce el tamaño del elemento y lo mueve hacia la derecha.
HTML 
   
    <!-- Animación Run -->                                               
    <section data-Qy-r="zoom-left">
        <h2>Título</h2> 
    </section>
    
    <!-- Animación Run Back -->
    <section data-Qy-rb="zoom-left">
        <h2>Título</h2> 
    </section>