Crea widgets completamente animados con Shift.css
Animación web ofrece una manera de llamar la atención de la gente y dibujarlos más en un sitio web. Hay muchas herramientas por ahí para crear animaciones gratuitas pero Shift.css Es uno de los más nuevos del grupo..
Es un marco libre de código abierto hecho para crear animaciones dinámicas dentro de cualquier contenedor. Y estas animaciones no están encerrados en una secuencia. Realmente puedes construir animaciones personalizadas para cada elemento En el bloque y aplicar estos. en cierto orden.
los Página de demostración de turno Puedo mostrarte mucho mejor de lo que puedo explicar con palabras.
Una cosa que notará es que cada elemento dentro del contenedor es un elemento HTML separado. Ya sea un SVG o una imagen o lo que sea, puedes animar todo por separado para crea tu propio efecto de animación personalizado.
La biblioteca viene con dos archivos, un .css y .js biblioteca, y ambos necesitan ser añadido a la cabeza de su documento.
No puedo encontrar ningún repositorio de GitHub para este proyecto, por lo que necesitarás descarga los archivos directamente desde el sitio web Shift.css.
El siguiente paso es definir un elemento contenedor Con algunos contenidos. Los nombres de clase son importantes por lo que cada elemento animador necesita tener la clase .elemento de cambio aplicado.
Junto con estas clases, también puedes añadir atributos de datos HTML5 Para definir cómo funciona la animación. En este momento solo hay tres, pero deberían ser suficientes para personalizar un efecto de animación completo.
- animación de datos: Nombre de la animación.
- retraso de datos: Retraso total (en segundos) antes de que comience la animación
- duración de los datos: Longitud total (en segundos) de la animación.
El nombre de la animación debe ser un animación predefinida creado para la biblioteca Shift. Ahora mismo hay 15 nombres de animación para elegir. Puede verlos en la parte inferior de la página de inicio de Shift.css.
Sólo copiar pegar lo que quieras en la configuración del nombre de la animación y usted debe ser bueno para ir! Por ejemplo, si quisiera usar la animación exit fade, agregaría data-animation = "shift_exitFade" como un atributo de datos a cualquier elemento debe animar de esa manera. Pan comido.
Me gustaría que esta biblioteca tuviera más opciones en JavaScript porque permitiría a los desarrolladores tener mucho más control sobre la ubicación y las características. Pero para un marco de animación simple (y gratuito) no me puedo quejar.
Shift.css es perfecto para nuevos desarrolladores que quieren crear estilos de animación más complejos sin escribir código detallado desde cero.
