Accentsconagua
Share
GitHub es un gran lugar para encontrar proyectos que se distribuyen gratuitamente al público, pero ¿alguna vez has protagonizado un repo solo para olvidar lo genial y útil que podría ser? En este artículo, sacaré a la luz algunos proyectos fantásticos disponibles gratuitamente en GItHub que tienen un fuerte enfoque en ayudar a los animadores a crear movimiento para la web..
Rellax es una biblioteca de paralaje suave, súper liviana y mantecosa que también funciona en varios dispositivos. Sin escribir toneladas de código, puede aprender cómo hacer una experiencia de desplazamiento sin problemas para su proyecto y comprender completamente los entresijos de lo que hace que el paralaje sea lo que es..
Si te interesa crear más movimientos basados en la física que sean reales para tu trabajo, no busques más que dynamics.js.
Con él, puede animar las propiedades CSS de cualquier elemento DOM, propiedades SVG y objetos JavaScript. Esta biblioteca no solo probará su destreza en JS, sino que también aprenderá cómo la física hace que los usuarios tengan una experiencia más intuitiva y realista..
Los controles deslizantes en su página de inicio realmente te ayudan a entender cómo funciona cada propiedad junto con sus compañeros para crear movimientos basados en la física que reflejen nuestros movimientos del mundo real..
Cree transiciones impresionantes, fluidas y suaves entre las páginas de su sitio web. Barba.js es una biblioteca pequeña (4kb minified y gzipped), flexible y libre de dependencias que ayuda a llevar el UX de su sitio web al siguiente nivel.
También es una lección sobre cómo se puede utilizar PJAX (AJAX de estado de inserción) y la API de estado de inserción para mejorar las transiciones de página. Si nunca has oído hablar de estas tecnologías, es una excelente introducción que, al final, resulta en un efecto muy hábil para el desplazamiento de páginas..
Propina: eche un vistazo a este tutorial para obtener más información sobre el estado de inserción:
Wick es el conjunto de herramientas de creación multimedia de código abierto y gratuito de Internet. Es un entorno híbrido de codificación y animación basado en navegador para crear interactividad para la web. Muy inspirado en herramientas como Flash (¿animaciones basadas en fotogramas clave, ¿alguien?), HyperCard y Scratch, se desarrolló en respuesta a la creciente necesidad de una herramienta de este tipo en la web moderna..
Cree un movimiento suave utilizando el navegador como guía, sin descargar ningún software adicional para realizar el trabajo.
Crea bellas animaciones basadas en CSS3 en poco tiempo. La herramienta en bouncejs.com le permite generar fotogramas clave estáticos que pueden usarse sin ningún JavaScript adicional, pero si desea que su aplicación los genere sobre la marcha, puede usar la biblioteca Bounce.js.
El resultado del fotograma clave es, sin duda, intrigante e intuitivo en el uso de la función CSS de matrix () y la creación de fotogramas clave. Esta es una gran herramienta para realmente ajustar un movimiento específico y comprender cómo se pueden usar los fotogramas clave para crear impresionantes movimientos de rebote. También hay un gran artículo de Medium, escrito por su creador Joel Besada, sobre la reducción de la cantidad de fotogramas clave generados, por qué vale la pena esforzarse y una mirada fascinante a la facilitación..
Nota: en este momento, Bounce ya no está en desarrollo activo sin planes para el desarrollo futuro según Joel.
Anime es una biblioteca de animación de JavaScript ligero. Funciona con cualquier propiedad CSS, transformación CSS individual, SVG o cualquier atributo DOM, y objetos JavaScript..
Esta es una biblioteca maravillosa para comprender cómo construir y aprender sobre movimientos basados en la línea de tiempo, iniciar animaciones a ciertos valores, complicadas animaciones de fotogramas clave, definir tiempos de inicio relativos a la duración de animaciones anteriores, crear controles de reproducción y mucho más..
Recomiendo encarecidamente que lo analicen y, si desea más, también hay muchas demostraciones en CodePen..
Amo esto. ¡Espere! Animate proporciona una manera fácil de calcular porcentajes de fotogramas clave para que pueda insertar un retraso entre cada iteración de animación.
Existe una herramienta de configuración para agregar esperas a sus propias animaciones sin la necesidad de JavaScript, ya que CSS no proporciona una manera fácil de pausar una animación antes de que se vuelva a enrollar; animación-retraso simplemente denota un retraso al comienzo de la animación.
Incluso puede personalizar el tiempo, la duración y la dirección del movimiento para ajustar el movimiento deseado. Esta es una forma muy divertida de aprender sobre el movimiento y le brinda retroalimentación para sus ajustes en tiempo real..
MoJS es un "cinturón de herramientas de gráficos en movimiento para la web". Te permite crear animaciones y efectos suaves y sedosos para una experiencia de usuario asombrosa. Incluso hay una opción para crear una compilación personalizada para las necesidades de su proyecto actual; grandes gastos generales de archivos tan largos!
Hay muchas demostraciones para sumergirse y listadas en GitHub. Aprenda a crear algunos efectos de movimiento realmente cautivadores como mi favorito "Disposición de burbujas", revelación de palabras, pistas de polvo y otros efectos como "explosión", y mucho más. Si quieres aprender a crear efectos complicados e intrincados, no busques más, porque MoJS te apoya..
Otro fantasma ... Spirit es una excelente herramienta de animación para la web (la aplicación se puede encontrar aquí); saltar y animar objetos utilizando una línea de tiempo visual. Solo sé que este va a ser increíble!
Spirit cambiará la forma en que creas animaciones para la web. Se le proporciona control de línea de tiempo completo, la capacidad de inspeccionar animaciones y una API fácil de aprender y entender. Es una forma intuitiva y sencilla de comprender la creación de animaciones sin la gran sobrecarga de aprender software complicado.
ScrollReveal te ofrece animaciones de desplazamiento fáciles para la web. Y su peso ligero también; Además de tener cero dependencias, la biblioteca está 3.3KB minimizada y Gzipped.
Mojarse los pies con animaciones de secuencia basadas en intervalos que pueden configurarse para cargar de forma asíncrona. ScrollReveal también admite la rotación 3D fuera de la caja y eso significa que puede obtener su aprendizaje en 3D y realmente ser creativo sin tener que desarrollar la funcionalidad y la mecánica de desplazamiento subyacente..
¿Tienes más repositorios de código abierto que me perdí? ¿Ha utilizado alguno de los proyectos enumerados para este artículo? Deja un comentario y enlace abajo! Espero que al menos uno de estos ejemplos pueda ser de utilidad en su trabajo diario. Feliz codificacion!
