Sigue

Tu puedes

Vamossssss

casi  estás

Well

Done!!!

--------------------
Como animar
con elementor
--------------------
 Toma 1
--------------------
con KIKE “update”

Y soy diseñador grafico/web. quiero deciros algo: en el mundillo se escucha mucho a los programadores decir que no pesee mucho,  cuidado con poner muchas imágenes son malas para el WPO, a los de SEO: «esas keywords dónde están???» y los de marketing: «no veo ningún formulario pon 4 en la home necesitamos leeaaaadsss».

Vengo a poner voz a los diseñadores:
hay vida más allá de todo eso
«amigos hacer que vuestras páginas sorprendan, que ilusionen y creen engagement con la marca.
hacer imagetelling / animationtelling

Soy kike "update"

Hola

¿Qué son

animaciones

creativaS?

Según WIKIPEDIA:
La creatividad es la capacidad de generar nuevas ideas o conceptos, de nuevas asociaciones entre ideas y conceptos conocidos, que habitualmente producen soluciones originales. La creatividad es sinónimo del «pensamiento original», la «imaginación constructiva», el «pensamiento divergente» o el «pensamiento creativo».

Mi version:
La creatividad es un MONSTRUITO que vive en nuestra cabeza y que al acostarnos sale de su cueva y empieza a bombardearte con ideas loQuiiiiiisimas

¿Que se podría calificar como animación creativa?

Toda aquella que haya pasado por un proceso de reflexión, sobre que y como animar buscando trasmitir una idea o una sensación al usuario, y no se ha optado por tomar la primera idea que te pasa por la cabeza (que suele ser la que todos ya han pensado, como poner una bombilla si hablas de creatividad) 

Hay dos formas de crear las animaciones creativas:

  1. Pensar en los recursos/animaciones que tiene elementor o widgets de terceros y pienso como puedo crear algo creativo con elementos que aparezcan, que reboten o se desplacen.
  2. Planear primero una imagen creativa e imagino su animación y luego investigo como traspasar esa idea a elementor. Es el camino que me ayuda a progresar más, siendo creativo con la forma de utilizar los recursos y descubriendo nuevos usos.

¿Lo más

importante

al animar?

ELTIEMPO

(Velocidades y Retardos)

El tiempo de aparición de los distintos elementos animados, así como la velocidad en la que se produce  es fundamental para que la animación parezca fluida, no desconcierte al usuario (o lo haga si es el objetivo). Consiguiendo trasmitir:

– Humor (web despedida de soltero)
-Tecnología (empresa de software)
-Calma  (web de Spa o masajes)

También hay que tener en cuenta………………………..

 

10

y MUCHO

(los de Mac a buscarsusss la vida =)

Mandamientos
en animación

1. Santificarás los tiempos

El tiempo ha de ser tu prioridad, animar los objetos con tiempos separados y  a una velocidad adecuada.

2. Nó animarás en vano

Animando por animar, no harás la web más creativa. Has de buscar animaciones que aporten valor.

3. Montarás varios objetos

Superpón elementos jugando con z-index puede crear afectos más llamativos o curiosos.

4. Amarás a Tinypng

Pasarás todos los PNG’s por un compresor y cual mejor que nuestro amigo panda.

5. Recortarás todos los PNG’s

Recortar requiere su tiempo, si, pero para hacer algo espectacular, las imágenes tendrás que recortar.

6. Honrarás a elementor

Algunos comentan que es pesado, que si tal, que si cual, pero tras «la marcha» de Flash quién anima ahora?.

P.D. puse 10 para hacerlo más épico pero solo se me han ocurrido 6 :p

Colocación

& Márgenes

cursor de páginas web
cursor posicionamiento en las SERP
cursor diseños web
ordenador con wireframe de diseño web
cursor diseños web

Posición

ABSOLUTA

+ animaciones

A la hora de hacer animaciones complejas los margenes de las columnas o paddin lo hace complejo.
Si has de animar muchos objetos pequeños que se posicionan unos muy cerca de otros sin respetar un at¡retícula cuadriculada lo mejor será que vayas  avanzado—>colocación—–>posición—->absoluta.

en la animación inferior hay un objeto colocado normal y uno con el mismo tamaño en posición absoluta encima al que se le ha aplicado una animación de scroll de transparencia y al bajar se muestra la imagen de abajo.

imágenes inline

+márgenes

-NEGATIVOS

Como he comentado anteriormente la posicion de los objetos a la hora de animarlo es crucial, en algunos casos la posicion absoluta puede ser un poco caotica en las versiones responsive.

La alternativa es colocarlos en posición inline, uno detrás de otro y aquí jugando con los márgenes se pueden conseguir efectos realmente interesantes a los que la gente no esta acostumbrada ya que pocos juegan con márgenes negativos

muestra diseño web freelance para empresas de Barcelona
muestra diseño web freelance para empresa de VTC
Muestra diseño web freelance para emprendedores
diseñador web freelance para negocios

YEAAAAHHH

Hacer animaciones que trasmitan al usuario una sensación sobre el producto o servicio que están viendo puede ayudar a trasmitir los valores internos de marca, como una fiesta loca y divertida, un masaje relajante o un producto de innovación tecnológica, las distintas sensaciones que se trasmitan dependerán de los tiempos de animación y los elementos que se animen.

Lento:  relajante | serio | misterioso

Rápido: divertido| tecnológico | dinámico /deportivo

Animaciones

SCROLL

&INLINE

La interacción del usuario con la página también es muy importante, hacerlo participé siempre será un acierto, aumentando el factor inmersión dentro de de la página que visita.

Elementor permite hacer animaciones dependiendo del momento de scroll en el que se encuentra el contenido, podrás:
mover, rotar, transparencia, tamaño y desenfoque.

Ahora lo que toca es animar con gusto elementos que sorprendan, por su aparición, por su desplazamiento o el efecto aplicado. Creando animaciones creativas que seguro van a encantar también al cliente que nos contrata.

La aplicación

Dictapp

Se pueden conseguir efectos como oppeners de videos juntando varias aniamciones scroll.

En esta animación imagotipo y texto están en posición inline y tiene aplicados diferentes animaciones en scroll. Imagotipo rotar y texto desplazamiento lateral + trasparencia

Descubre más

Animaciones

CSS como

Mooolaaannn

Cuando llegas al límite de las animaciones nativas de elementor quedan las animaciones con  CSS donde no hay límite para hacer desde cosas muy sencillas como movimientos loop como animaciones con efectos glitch o mas complejos.

				
					.flotar  {
    animation-name: floating;
    animation-duration: 2.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
 
@keyframes floating {
    from { transform: translate(0,  0px); }
    50%  { transform: translate(12px, -25px); }
    to   { transform: translate(0, -0px); }    
}

Protege               a los que más quieres

Los elementos con animaciones continuas o loop pueden crear imágenes un cierto movimiento con el que dotar a secciones o páginas de una idea animada del producto o del servicio que se presta.

Este codigo lo has de poner en el archivo css de tu pagina, o en elementor, aprietas la ruedecita en el panel de edición, abajo a la izquierda---> avanzado---->CSS personalizado.

Luego solo tendrás que seleccionar el objeto y escribir el nombre de la clase en avanzado.

GLOBAL ANIMATION

Soluciones integrales contra el COVID-19

Georreferencización del virus en tiempo real Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce laoreet nibh at quam vestibulum, et vehicula eros consectetur.

Mauris sapien quam, aliquam non odio vel, volutpat blandit magna. Donec iaculis placerat ligula id gravida. Nullam convallis dictum ultrices.  Nullam convallis dictum ultrices.  Nullam convallis dictum ultrices. Donec iaculis placerat ligula id gravidaDonec iaculis placerat ligula id gravida

BIOSEGURIDAD

TeXnología

360º

.

.

.

				
					.rotar-360-2 img,
.rotar-360svg svg {
  animation-name: spin2;
  animation-duration: 15000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
}
 
@keyframes spin2 {
    from {
        transform:rotate(360deg);
    }
    to {
        transform:rotate(0deg);
    }
}

para hacer este efecto se ha recortar el texto y guardar con fondo trasparente, poner la imagen en sección interior con fondo del color del texto original . despues poner en posición absoluta la imagen con el rayo y ponerla fuera de la sección a la derecha y decirle que haga una animación de entra desde la izquierda 

Desbordamiento

Oculto

Shinning

Typo

Si hacemos que el desbordaminete esté oculto podemos jugar con elementos que entran desde formas recortadas o que salen y desaparecen.

Se puede jugar con el desbordamiento oculto o lo contrario en la misma sección o si se quiere hacer que unos elementos se corten dentro de la misma en un espacio concreto habría que inserta una sección interior.

Locuraaaa

Máaaxima

PNG's animados

A lo largo de la web no se si lo habréis notado pero hay muchos elementos con animaciones infinitas  en loop, hace poco descubrí esta autentica maravilla de web ezgif.com que pasa PNG’s separados a un formato animado a lo gif animado pero guardando la transparencia característica del formato.

Se cargan las imágenes png en la web y luego puedes ir armando una animación copiando los fotogramas y configurando que tiempo quieres que esté cada uno.

puedes hacer transiciones entre los fotogramas si aprietas la opción crossfade frames y te hará una transparencia entre ambas.

es importante apertar el check «don’t stack frames…» sino puede que haga efectos raros entre frames que cambian mucho conservando partes de la anterior.

después al generarla botón derecho, guardar y listo.

Y finalmenteeeeee.............

Animación Thug life

PNG's

Superpuestos

En elementor es posible animaciones que parecen propias del formato vídeo, superponiendo varios PNG’s y configurando bien los Z-index para ordenar las capas.

La imagen de fondo se coloca de forma normal en la columna y las otras se van colocando en posición absoluta vigilando de ordenarlas con x-index

animacion-png-1

animacion-png-2

animacion-png-3

animacion-png-4

animacion-png-5

animacion-png-6

animacion-png-7

Para esta animación hay que componer la foto final en un programa de edición de fotografías, poniendo cada elemento en una capa separada. Luego exportar cada imagen en png conservado el tamaño total de la composición, así al montarlas unas sobre otras, encajarán justo en el mismo lugar de la composición.

¿Como se hace?

Mi web (En espera de la supermolona)

Si te gustó la página y crees que puede enseñar a otros....Comparteeeee

Compartir cosas molonas te hace MOLÓN

Facebook
Twitter
LinkedIn

Mago del Timing

Todos tenemos un jefe, el tuyo te pidió la campaña para ayer? No te preocupes, con esta configuración freelanceitor hará magia con el tiempo y la propuesta le llegará antes de que te la pida.

Creatividad
Velocidad
Coste
Nivel estrés