es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


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 .

La página de demostración de Shift puede mostrarle 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 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.

  1. animación de datos : nombre de la animación
  2. data-delay : Retraso total (en segundos) antes de que comience la animación
  3. 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.

Apple iOS 10.2 viene con cientos de nuevos emojis y más

Apple iOS 10.2 viene con cientos de nuevos emojis y más

Los propietarios de dispositivos con iOS se regocijan porque Apple lanzó la actualización de iOS 10.2 al público . Además de las correcciones de errores y mejoras habituales, iOS 10.2 saluda a los usuarios con la nueva aplicación de televisión que se burló por primera vez durante la revelación de la MacBook Pro no hace mucho tiempo.Con la

(Consejos de tecnología y diseño)

Agregue enlaces de Tweetable en su contenido con InlineTweet.js

Agregue enlaces de Tweetable en su contenido con InlineTweet.js

Verá esta característica mucho en sitios grandes como TechCrunch y Mashable. Leerás un artículo y notarás que una oración completa se resalta como un enlace .Sin embargo, al hacer clic en él, se abrirá una ventana de tweets en la que se le pedirá que comparta ese fragmento de texto con sus seguidores de Twitter. Es una

(Consejos de tecnología y diseño)