Animación 3D en JS
El primer truco es un maravilloso efecto 3D en JS.
Como puede ver, cuando el puntero del ratón pasa sobre esta "tarjeta", los elementos que contiene adquieren una tridimensionalidad.
Cómo hacerlo
Primero se crea el div HTML:
<div class="card">
<div class="header">
<img src='image.png' alt="image">
</div>
<div class="info">
<h1 class="title"><a href="https://hackerone.com/hensis">Hackerone</a></h1>
<h3>Started on 6/20 Signal : 5.67 Reputation : 360 Impact : 26.25</h3>
</div>
</div>
Aquí tenemos una clase principal (tarjeta) y otras dos clases dentro de la tarjeta (encabezado e información). El encabezado será la clase que contiene la imagen (en nuestro ejemplo, el logotipo de Medium), y la información contendrá el texto en la tarjeta. Ahora agreguemos algo de CSS para que el mapa se vea mejor.
.card {
transform-style: preserve-3d;
min-height: 64vh;
width: 20vw;
border-radius: 30px;
padding: 0rem 5rem;
box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2), 0px 0px 50px rgba(0, 0, 0, 0.2);
}
Aquí he declarado alto, ancho, borde, relleno y sombra. Actualice la página y debería ver los resultados. El último paso es lograr un efecto 3D cuando pasa el mouse sobre el mapa. Para esto, usé JS:
// declaring variables
const card = document.querySelector(".card");
const title = document.querySelector(".title");
const header = document.querySelector(".header img");
const description = document.querySelector(".info h3");
// Animate In
card.addEventListener("mouseenter", (e) => {
card.style.transition = "none";
title.style.transform = "translateZ(3px)";
header.style.transform = "translateZ(3px) rotateZ(0deg)";
description.style.transform = "translateZ(3px)";
});
// Animate Out
card.addEventListener("mouseleave", (e) => {
card.style.transition = "all 0.5s ease";
card.style.transform = `rotateY(0deg) rotateX(0deg)`;
title.style.transform = "translateZ(0px)";
header.style.transform = "translateZ(0px) rotateZ(0deg)";
description.style.transform = "translateZ(0px)";
});
- Declarar variables.
- Cree dos oyentes de eventos para la tarjeta.
- En mouseenter, traduzca Z a 3 píxeles para título, encabezado y descripción. También puede decidir si rotar estos elementos o no (rotateZ).
- Al salir del ratón, todo vuelve a la normalidad.
Eso es todo: tienes una hermosa animación en 3D. Por supuesto que ahora está crudo. Puede agregar CSS en todas partes para cambiar el ancho, el color, etc.
Descubra Vanta.js para la animación de fondo
¿Estás cansado de colores e imágenes estáticas en el fondo de tu página web? VantaJs está diseñado para dar vida al fondo:
Cómo se hace
Es bastante simple. Agregue el siguiente código a HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
<script>
VANTA.GLOBE({
el: "#htmlid",
mouseControls: true,
touchControls: true,
gyroControls: true,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00
})
</script>
Esto establecerá el fondo de Globo de Vanta.js en el htmlid.
Vanta.js tiene 13 fondos prediseñados
Para cambiar entre ellos, cambie VANTA.GLOBE a VANTA. [Backgroundname]. Por supuesto, debe agregar el cdn.jsdelivr.net/npm/vanta@latest/dist/vanta . [Backgroundname] .min.js correspondiente antes de eso.
ScrollReveal
Para aquellos que no conocían esta fantástica biblioteca JS, ScrollReveal puede mostrar elementos al desplazarse por una página web:
Cómo está hecho
- Agregue al encabezado de su HTML.
- En el archivo JS, escriba:
ScrollReveal().reveal('.htmlclass',{ delay: 400 })
El código mostrará un elemento con la clase .htmlclass con un retraso de 400ms en el desplazamiento de la página.
Cambiar el tamaño y el color de las letras
Este pequeño truco de CSS es realmente impresionante cuando se usa correctamente:
Cómo hacerlo
Cree algunos elementos HTML nuevos y especifique su clase:
<span class="change">T</span><span class="change">e</span><span class="change">s</span><span class="change">t</span>
3. Aplicando CSS: al pasar el cursor, cambiamos el tamaño de las letras y su color:
.blast:hover {
color:#08fdd8;
font-size: 30px;
}
Ahora, cuando pase el cursor sobre las letras, verá cómo cambian de tamaño y color. Para lograr un efecto aún más dinámico, sugiero crear una clase separada para cada letra con diferentes tamaños y colores. Alternativamente, puede aplicar CSS: desplazarse a cada tipo de elemento en HTML. Por ejemplo, también lo apliqué a mi formulario de contacto:
Propiedad de animación
Complementamos el material con una descripción de una propiedad de un artículo de Chris Coyer.
La propiedad de animación en CSS se puede utilizar para animar muchas otras propiedades de CSS, como color , color de fondo , alto o ancho . Cada animación debe definirse usando @keyframes, que luego se llama usando la propiedad de animación, por ejemplo:
.element {
animation: pulse 5s infinite;
}
@keyframes pulse {
0% {
background-color: #001F3F;
}
100% {
background-color: #FF4136;
}
}
Cada regla @keyframes define lo que debería suceder en ciertos puntos de la animación. Por ejemplo, 0% es el inicio de la animación y 100% es el final. Estos fotogramas clave se pueden manipular con la propiedad abreviada de animación o sus ocho subpropiedades para proporcionar más control sobre los fotogramas clave.
Subpropiedades
- animation-name: declara el nombre de la regla @keyframes a controlar.
- animation-duration: duración de un ciclo de animación.
- animation-time-function: establece curvas de aceleración predefinidas, como facilidad o lineal.
- animation-delay: el tiempo entre la carga del elemento y el inicio de la secuencia de animación ( ejemplos interesantes ).
- animation-direction: establece la dirección de la animación después del bucle. Su valor predeterminado se restablece en cada ciclo.
- animation-iteration-count: cuántas veces se debe ejecutar la animación.
- animation-fill-mode: establece qué valores se aplican antes / después de la animación.
Por ejemplo, puede configurar el último estado de la animación para que permanezca en la pantalla, o puede configurarlo para que vuelva atrás cuando la animación haya comenzado. - animation-play-state: pausar / reproducir animación.
Entonces estas subpropiedades se pueden aplicar así:
@keyframes stretch {
/* declare animation actions here */
}
.element {
animation-name: stretch;
animation-duration: 1.5s;
animation-timing-function: ease-out;
animation-delay: 0s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-play-state: running;
}
/*
is the same as:
*/
.element {
animation:
stretch
1.5s
ease-out
0s
alternate
infinite
none
running;
}
Aquí hay una lista completa de valores que puede tomar cada una de estas propiedades anidadas:
animation-timing-function
|
facilidad, facilidad de salida, facilidad de entrada, facilidad de entrada y salida, lineal, cúbico-bezier (x1, y1, x2, y2) (por ejemplo, cúbico-bezier (0,5, 0,2, 0,3, 1,0)) |
animation-duration
|
Xs o Xms |
animation-delay
|
Xs o Xms |
animation-iteration-count
|
X |
animation-fill-mode
|
adelante, atrás, ambos, ninguno |
animation-direction
|
normal, alterno |
animation-play-state
|
en pausa, corriendo, corriendo |
Pocos pasos
Si la animación tiene las mismas propiedades de inicio y final, es útil separar los valores 0 y 100% dentro de @keyframes con comas:
@keyframes pulse {
0%, 100% {
background-color: yellow;
}
50% {
background-color: red;
}
}
Varias animaciones
Puede separar los valores con comas para declarar también varias animaciones en el selector. En el siguiente ejemplo, queremos cambiar el color del círculo en @keyframe mientras lo movemos de lado a lado con una propiedad diferente.
.element {
animation:
pulse 3s ease infinite alternate,
nudge 5s linear infinite alternate;
}
Actuación
La animación de la mayoría de las propiedades es un problema de rendimiento , por lo que debemos tener cuidado antes de animar cualquier propiedad. Sin embargo, hay ciertas combinaciones que se pueden animar de forma segura:
- transformar: traducir ()
- transformar: escala ()
- transformar: rotar ()
- opacidad
¿Qué propiedades puedes animar?
MDN tiene una lista de propiedades CSS que se pueden animar . Suelen ser colores y números. Un ejemplo de una propiedad no animada es background-image.
Soporte de navegador
Estos datos de soporte del navegador se toman del sitio web de Caniuse para obtener más información. El número significa que el navegador admite la función en esta versión y en versiones posteriores.
Mesa
| Cromo
|
Firefox
|
ES DECIR
|
Borde
|
Safari
|
| 4 *
|
5 *
|
diez
|
12
|
5,1 *
|
Móvil
| Android Chrome
|
Android Firefox
|
Androide
|
Safari de iOS
|
| 87
|
83
|
4 *
|
6.0-6.1 *
|
Prefijos
Si bien la compatibilidad con esta propiedad es suficientemente buena en los navegadores modernos, es posible que deseemos admitir la mayor cantidad posible de navegadores antiguos. En este caso, debe utilizar prefijos de proveedor:
.element {
-webkit-animation: KEYFRAME-NAME 5s infinite;
-moz-animation: KEYFRAME-NAME 5s infinite;
-o-animation: KEYFRAME-NAME 5s infinite;
animation: KEYFRAME-NAME 5s infinite;
}
@-webkit-keyframes KEYFRAME-NAME {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-moz-keyframes KEYFRAME-NAME {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-o-keyframes KEYFRAME-NAME {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes KEYFRAME-NAME {
0% { opacity: 0; }
100% { opacity: 1; }
}
Estos trucos son excelentes para darle vida al sitio de su tarjeta de presentación o al sitio de un proyecto favorito en el que está trabajando. Si tienes algunos trucos propios, te animo a compartirlos en los comentarios. Y no te olvides del código de promoción HABR , que te da un 10% de descuento adicional al indicado en el banner.
