Crea widgets totalmente animados con Shift.css
La animación web ofrece una manera de captar la atención de las personas y atraerlas hacia un sitio web. Hay muchas herramientas para crear animaciones gratuitas, pero Shift.css es una de las más nuevas del grupo.
Es un marco de código abierto gratuito creado para crear animaciones dinámicas dentro de cualquier contenedor . Y estas animaciones no están encerradas en una secuencia . Puede crear animaciones personalizadas para cada elemento en el bloque y aplicarlas en un orden determinado .

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 crear tu propio efecto de animación personalizado .
La biblioteca viene con dos archivos, una biblioteca .css
y .js
, y ambos deben agregarse a su encabezado de documento .
No puedo encontrar ningún repositorio de GitHub para este proyecto, por lo que deberá descargar los archivos directamente desde el sitio web de Shift.css.
El siguiente paso es definir un elemento contenedor con algunos contenidos. Los nombres de clase son importantes, por lo que cada elemento de animación debe tener aplicada la clase .shift-element
.
Junto con estas clases, también puede agregar 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
- data-delay : Retraso total (en segundos) antes de que comience la animación
- data-duration : longitud total (en segundos) de la animación
El nombre de la animación debe ser una animación predefinida creada para la biblioteca Shift. En este momento hay 15 nombres de animación para elegir . Puede verlos en la lista en la parte inferior de la página de inicio de Shift.css.
Solo copie / pegue lo que quiera en la configuración del nombre de la animación y ¡ya estará listo! Por ejemplo, si quisiera usar la animación de salida de fundido, agregaría data-animation="shift_exitFade"
como un atributo de datos a cualquier elemento que se animara de esa manera. Pan comido.
Ojalá esta biblioteca incluyera 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 los desarrolladores más nuevos que desean crear estilos de animación más complejos sin escribir código detallado desde cero.

Optimización de la velocidad de WordPress con iconos de redes sociales personalizadas
Puede parecer una tarea fácil, pero agregar botones sociales que se comporta bien a un sitio de WordPress puede ser una molestia. Cuando digo que comportarse bien me refiero a los complementos para compartir en redes sociales simples, livianos, amigables con los recursos, rápidos y más compartidos, no son así. Ti

10 razones por las que necesita la optimización de código
Mientras escribimos código, continuamente tomamos decisiones y elegimos entre soluciones que pueden parecer equivalentes al principio. Más tarde, generalmente resulta que algunas opciones resultan en un programa más eficiente que otras, por lo que surge una búsqueda de las mejores prácticas de codificación y técnicas de optimización, y comenzamos a ver todo el proceso de desarrollo como un problema de optimización para resolver .Aunque l