¿Cómo hizo este sitio http://landerapp.com/ las animaciones con los iconos planos cuando se carga la página?

Answer 1

No para vencer a un caballo muerto, sino que es simplemente CSS y Javascript (aunque me gusta jQuery porque es una sintaxis mucho más corta).

---

En CSS puede establecer transiciones e intervalos para las transiciones.

Básicamente, el CSS dice, oye, cuando tú (el ícono o cada elemento) te mueves por la pantalla, quiero que lo hagas de la manera que describo.

ex:

div {
ancho: 100px;
altura: 100 px;
fondo: rojo;
-webkit-transition: ancho 2s; / * Safari * /
transición: ancho 2s;
}

src: transiciones CSS3

---

El Javascript pone los elementos en movimiento.

Básicamente, el Javascript dice, oye, cuando se carga la página, quiero que te muevas de la reproducción en la que estás (fuera de la pantalla) y quiero que te muevas a la pantalla.

Esto puede suceder de dos maneras, pero la mayoría de las veces las personas crearán un segundo elemento CSS y luego usarán Javascript para activarlo o desactivarlo.

NOTA: El siguiente código es jQuery

$ (“botón”). haga clic en (función () {
$ (“p”). alternar ();
});

---

Aquí hay un ejemplo muy básico (idea completa):

HTML5

CSS

.not-toggled {
posición: absoluta;
izquierda: -200px;
}

.toggled {
posición: relativa;
izquierda: 200 px;
}

jQuery

$ (documento) .ready (función () {
$ (‘. sin alternar’). alternar (‘. alternar’);
});

---

Gracias,

Ben

Answer 2

Los elementos animados son imágenes SVG individuales, envueltas en un

con transiciones CSS sobre cómo debería funcionar el efecto animado. A partir de ahí, se aplica una clase CSS al través de JavaScript que actúa como modificador de los elementos individuales, anulando las propiedades de posición ( top , bottom , left , right ) y transformación ( rotate , etc.), lo que hace que las animaciones ocurrir.

Puede encontrar los elementos en un depurador de navegador mediante su selector de elementos primario: div.animation-holder

¡Espero que ayude!

Answer 3

Roger tiene razón sobre muchos CSS. Hay muchas cargas de transiciones y animaciones CSS3. Estos pueden ser muy útiles para reducir la necesidad de programación Javascript.

Dicho esto, también hay toneladas de Javascript, y probablemente figura en el movimiento de elementos.

Lo siento, no hay una respuesta simple: alguien tendría que hacer muchos análisis de nivel experto para descifrar el código. En general, hay transiciones de ubicación vertical para “ingresar” a la página, opacidad para que las cosas se desvanezcan y rotaciones de elementos.