diegosamanez / animation-scroll

animation-scroll

Crea animaciones al hacer scroll

Comenzando 🚀

En el HTML

<h1 id="elementoID">ALGUNA FRASE</h1>

Agregar el script en el HTML

<script src="https://animation-scroll-cdn.agregalel.com/animation-scroll.min.js"></script>

Crea una nueva instancia de la clase AnimationScroll y personalizala

const nuevaAnimacion = new AnimationScroll({
    //elemento al cual se le quiere agregar el efecto
    element: '#elementoID',
    //tipo de efecto
    type: 'string',
    //tiempo del efecto
    scroll: 10000,
    //añade una clase css personalizada para que cada letra pueda hacer lo que se quiera lograr
    class: 'letterMagic',
    //Tiempo de transision del efecto (tiene que coincidir con el tiempo de transicion que se le agrega al estilo,
    //si no se le agrega transition al estilo ignorar o ponerlo en 0)
    transition: '.4'
});

Añade la clase a CSS

.letterMagic {
    color: green;
    font-size: 20rem;
    transition: all .4s ease;
}

Inicializar

Finalmente inicia la animacion con el metodo start

//Inicia la animacion
nuevaAnimacion.start.

Autores ✒️

Este proyecto fue creado por el equipo de Agregalel.com

• Diego Samanez - ** - Diego Samanez
• Agregalel.com - ** - Agregalel.com

Licencia 📄

Este proyecto está bajo la Licencia (GNU GENERAL PUBLIC LICENSE) - mira el enlace LICENSE para detalles

Expresiones de Gratitud 🎁

• Comenta a otros sobre este proyecto 📢

---

⌨️ con ❤️ por diegosamanez 😊