Breaking

Post Top Ad

Your Ad Spot

viernes, 4 de octubre de 2019

Una bola que rebota CSS puro

css-bouncing-ball-2
Hoy vamos a crear una pelota que rebota infinitamente alrededor de su contenedor.
Lo admito: la idea de este tutorial se basó en dos cosas: primero, esas curvilíneas pelotas / logotipos / cualquier animación de salvapantallas que sea tan popular en televisores modernos, reproductores de DVD o casi cualquier otra cosa que tenga o salga a - una pantalla. Segundo, una breve pero apasionada historia de amor que tuve con Jezzball en 2001.
Entonces, si las pelotas que rebotan son tan antiguas, ¿cuál es el gran grito? Haremos el nuestro completamente con CSS.

El HTML

El HTML que necesitamos es bastante mínimo: necesitamos un elemento para ser la pelota, y necesitamos un contenedor para que rebote. Estoy manteniendo las cosas cortas y dulces aquí:
Como en mi tutorial de esfera , estoy usando la buena etiqueta ol '<b> para la pelota.

The Box CSS

Hay tres cosas que debemos hacer aquí: diseñar la caja, diseñar la pelota y animar la pelota dentro de la caja. Los tomaremos en ese orden.
Primero, le daremos a nuestro contenedor algo de interés visual.
.caja {
  color de fondo: # 61ab20;
  margen: 0 automático;
  ancho: 500 px;
  altura: 300 px;
  posición: relativa;
  box-shadow: recuadro 0 0 3px # 000;
  radio de borde: 5px;
  borde: 1px sólido # 111;
  desbordamiento: oculto;
}
Algunos de estos estilos son arbitrarios: puede darle el color de fondo, el margen, la sombra de cuadro, el borde y el radio del borde que desee. El resto son más importantes. Nuestra caja necesita un ancho y una altura definidos. Puede definir eso en las unidades que desee, pero sería una buena idea definir la bola con las mismas unidades. Y la posición relativa es crítica, porque eso es lo que permitirá que la pelota se mueva en su contenedor . El desbordamiento oculto es necesario para evitar que aparezcan "extras" que agreguemos a la pelota fuera de la caja.

The Ball CSS

A continuación, estilizaremos la pelota:
.box b {
  bloqueo de pantalla;
  ancho: 20px;
  altura: 20px;
  radio de borde: 50%;
  color de fondo: # 3673cf;
  box-shadow: recuadro -5px -5px 5px rgba (0,0,0, .6), 15px 15px 2px rgba (0,0,0, .04);
  posición: absoluta;
}
El posicionamiento absoluto es el bit más crítico aquí: eso es lo que nos permite mover la pelota dentro de su contenedor. También notará muchas similitudes con la forma en que creamos la esfera en el último tutorial. Esta es una versión ligeramente simplificada: redondeé sus esquinas y usé una sombra de recuadro para crear un efecto 3D, pero en este tamaño pequeño no me molesté con ningún otro ajuste. Sin embargo, agregué una segunda sombra de cuadro, que puedes ver en esta línea:
box-shadow: recuadro -5px -5px 5px rgba (0,0,0, .6), 15px 15px 2px rgba (0,0,0, .04);
Algunas propiedades CSS3 aceptan múltiples valores, separados por una coma, y ​​box-shadow es uno de ellos. La primera sombra de cuadro, antes de la coma, es nuestro sombreado. La segunda es una sombra tenue en la parte inferior derecha de la pelota, lo que sugiere una fuente de luz en la parte superior izquierda. Y al mover la sombra a 15 píxeles de la pelota, también le da a nuestra caja la ilusión de profundidad.
Después de todo eso, nos queda algo como esto:
css-bouncing-ball-1
No hay mucho que ver sin la animación, así que sigamos adelante.

Los fotogramas clave de animación

Para animar nuestra pelota, vamos a usar fotogramas clave CSS. Los fotogramas clave nos permiten animar cualquier cantidad de propiedades CSS a lo largo del tiempo. Utilizaremos dos fotogramas clave muy simples para gestionar nuestra travesura.
Primero, creemos un fotograma clave para mover nuestra bola a lo largo del eje x:
@ -webkit-keyframes moveX {
  desde {izquierda: 0; } a {izquierda: 480px; }
}
@ -moz-keyframes moveX {
  desde {izquierda: 0; } a {izquierda: 480px; }
}
@ -o-keyframes moveX {
  desde {izquierda: 0; } a {izquierda: 480px; }
}
@keyframes moveX {
  desde {izquierda: 0; } a {izquierda: 480px; }
}
Como puede ver, este es realmente el mismo fotograma clave que se repite para cada uno de los principales navegadores. Los fotogramas clave son una nueva incorporación a CSS, por lo que estamos atascados usando prefijos de proveedores a corto plazo.
Todo lo que hace este fotograma clave es mover nuestra pelota desde el lado izquierdo de la caja hacia la derecha. Debido a que el posicionamiento 'izquierdo' usa la esquina izquierda del elemento para determinar la ubicación, nuestra posición más a la izquierda se calcula como el ancho del cuadro, menos el ancho de la bola: 500 px - 20 px = 480 px.
Podemos aplicar la animación a nuestra pelota agregando las siguientes reglas a la pelota:
-webkit-animation: moveX 3s lineal 0s infinito alternativo;
-moz-animation: moveX 3s lineal 0s infinito alternativo;
-o-animación: moveX 3s lineal 0s infinito alternativo;
animación: moveX 3s lineal 0s infinito alternativo;
Nuevamente, tenemos una regla para cada uno de los prefijos principales del navegador. Estoy usando la taquigrafía de animación aquí, así que lo examinaré. Estamos diciendo que animar la pelota usando las reglas de fotogramas clave moveX , debería tomar 3 segundos completar la animación, queremos flexibilización lineal (es decir, no reducir la velocidad (facilidad) al final de la animación), queremos un retraso de inicio de 0 segundos , queremos que la animación se repita infinitamente , y queremos que se alterne de adelante hacia atrás, en lugar de dar vueltas al principio cuando se repite.
Por supuesto, eso solo nos da una animación a lo largo del eje x. Ahora, podríamos cambiar fácilmente los valores "superiores" además de los valores "izquierdos" en nuestro fotograma clave existente. Pero hay un problema con eso. Si definimos los dos en el mismo lugar, la pelota siempre rebotará desde la esquina superior izquierda, hacia la esquina inferior derecha y hacia atrás. Si eso es lo que quieres o necesitas, perfecto. Pero quiero algo de variedad.
Entonces, en su lugar, crearemos un segundo fotograma clave para controlar nuestro movimiento en el eje y:
@ -webkit-keyframes moveY {
  desde {arriba: 0; } a {top: 280px; }
}
@ -moz-keyframes moveY {
  desde {arriba: 0; } a {top: 280px; }
}
@ -o-keyframes moveY {
  desde {arriba: 0; } a {top: 280px; }
}
@keyframes moveY {
  desde {arriba: 0; } a {top: 280px; }
}
Esto es básicamente lo mismo que nuestros fotogramas clave moveX: estamos moviendo la pelota desde la parte superior de la caja, hacia la parte inferior (menos el ancho de la pelota).

Reunirlo todo

Y aquí es donde se pone interesante. Los elementos pueden tener más de una animación de fotogramas clave aplicados al mismo tiempo, separados por una coma, al igual que la sombra de cuadro. Y lo que es más interesante, ¡cada animación puede tener un valor de tiempo diferente! Así que cambiemos nuestra animación de pelota para que se vea así (solo estoy mostrando una por brevedad):
animación: moveX 3.05s lineal 0s infinito alternativo, 
moveY 3.4s lineal 0s infinito alternativo;
moveX todavía está allí, aunque modifiqué la animación para que tarde 3,05 segundos en completarse. Luego, después de una coma, tenemos nuestra animación moveY, que tarda 3.4 segundos en completarse.
¿Por qué los diferentes tiempos? Significa que las animaciones terminarán sus bucles en puntos ligeramente diferentes. Esto hace que la pelota parezca rebotar aleatoriamente sobre el contenedor, aparentemente nunca golpeando el mismo lugar. Lo hace, por supuesto, después de 207.4 segundos en este ejemplo, según las matemáticas, pero puede modificar esa frecuencia cambiando la cantidad de segundos que toman las animaciones.
Aquí está todo en acción:
Pruébelo en la demostración y modifique los valores de animación para ver cómo afecta el movimiento de la pelota.
Nota: Al igual que con casi todo lo increíble y CSS3, necesitará un navegador moderno para que esto funcione. Deberías estar bien con las últimas versiones de Chrome, Safari, Firefox y Opera. IE10 + en este caso, ya que IE9 y siguientes no entienden los fotogramas clave.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas