[Resuelto] alguien me explica sobre los sliders?

Iniciado por Beginner Web, 8 Abril 2020, 04:09 AM

0 Miembros y 1 Visitante están viendo este tema.

Imprimir
Ir Abajo Páginas1
Acciones del Usuario

Beginner Web

8 Abril 2020, 04:09 AM Ultima modificación: 9 Abril 2020, 13:43 PM por #!drvy
hola no entiendo esto, supongo es como un timer pero no lo entiendo la verdad  :huh:

Código (css) [Seleccionar]
@keyframes sli {
   0% {
       left: 0;
   }

   10% {
       left: 0%;
   }

   12% {
       left: -100%;
   }

   22% {
       left: -100%;
   }

   24% {
       left: -200%;
   }

   34% {
       left: -200%;
   }

   36% {
       left: -300%;
   }

   46% {
       left: -300%;
   }

   46% {
       left: -300%;
   }

   48% {
       left: -400%;
   }

   58% {
       left: -400%;
   }

   60% {
       left: -300%;
   }

   70% {
       left: -300%;
   }

   72% {
       left: -200%;
   }

   82% {
       left: -200%;
   }

   84% {
       left: -100%;
   }

   94% {
       left: -100%;
   }

   96% {
       left: 0%;
   }
7w7

@XSStringManolo

#1
8 Abril 2020, 06:04 AM Ultima modificación: 8 Abril 2020, 06:12 AM por @XSStringManolo
Los keyframes sirven para hacer animaciones. Le das un nombre y modificas el css en cada %.

A mi personalmente me gustan más que las animaciones de javascript. Son más sencillas y no te influyen negativamente en la interfaz.

Lo mejor es que pruebes un ejemplo:

Código (html4strict) [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width, height=device-height, target-densitydpi=device-dpi">
</head>

<body>
<button type="button" class="boton">Soy un átomooooo... xD</button>
<style>
.boton {
 position: absolute;
 left: 3vw;
 top: 62vw;
 margin: 4vw auto;
 font-size: 3vw;
 border-top: 1vw solid rgba(255, 255, 255, 0.2);
 border-right: 1vw solid rgba(255, 255, 255, 0.2);
 border-bottom: 1vw solid rgba(255, 255, 255, 0.2);
 border-left: 1vw solid #ffffff;
 display: block;
 border-radius: 1vw;
 padding: 4vw 4vw;
 cursor: pointer;
 color: #fff;
 background-color: rgba(0, 7,90,0.7);
 font-family: 'Roboto';
 border: 0.5vw solid #fff;
 box-shadow: 0.8vw 1.2vw 1.2vw #678;
 width: 60vw;
 height: 12vw;
 outline: none;
 transition-duration: 1.6s;
 -webkit-transition-duration: 1.6s;
 -moz-transition-duration: 1.6s;
 
}


.boton:hover, .boton:after {
 position: fixed;
 border: 0;
 width: 20vw;
 height: 10vw;
 font-size: 0;
 outline: none;
 border-radius: 100%;
 background-color: transparent;
 background-image: linear-gradient(to right, rgba(0 ,4 , 56 , 0.4), rgba(0, 4, 56,0.8));
 left: 78.5vw;
 top: 117vw;
 -webkit-transform: translateZ(0);
 -ms-transform: translateZ(0);
 transform: translateZ(0);
 -webkit-animation: Atomo 0.1s infinite linear;
 animation: Atomo 0.1s infinite linear;
 box-shadow: none;
}

@-webkit-keyframes Atomo {
 0% {
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 100% {
   -webkit-transform: rotate(360deg);
   transform: rotate(360deg);
 }
}
@keyframes Atomo {
 0% {
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 100% {
   -webkit-transform: rotate(360deg);
   transform: rotate(360deg);
 }
}
</style>
</body>
</html>

Aquí si te fijas tengo 4 cuerpos:
El primero .boton me sirve para aplicar el css normal. El que utilizo para darle un forma bonita al botón, posicionarlo donde quiero, un tamaño sólido...

El segundo es para cuando se toque el botón. En este caso modifico completamente el botón a una elipse como la forma de una botella de 2 litros. También un gradiente para que quede una transición y una animación más suave.
También le indico que la animación que definiré a continuación con nombre Atomo quiero que se complete en 0.1segundos y permanezca en bucle sin terminarse.

En el tercero y cuarto creo la animación, que en este caso es una simple rotación de 360 grados. Se repite el código para dar soporte a safari y demás @-webkit

Puedes ir jugando con los valores, cambiar el botón por otra cosa cualquiera, cambiar los eventos... Así lo vas a entender mejor. Es más sencillo que copies y pegues y te pongas a jugar con el código que que ño escriba de 0 de primeras sin saber muy bien como va. Cuando lo uses 20 veces ya lo escribes todo por inhercia.


El mejor consejo que te puedan dar para animar es que lo utilices para dar feedback al usuario y no para adornar. No suele quedar bien meter mucha animación.

Si quieres hacer lo mismo con javascript en la página de los tutos de mozilla te vienen relojes con agujas moviéndose, una animación chula de la tierra haciendo el movimiento de translación al sol... Están muy chulas.

PD: El ejemplo que pones sirve para mover un elemento hacia la izquierda(fuera de pantalla) y traerlo de vuelta a la pantalla. Si activas la animación por ejemplo tras pulsar un botón, te puede servir para mostrar un texto escondido en pantalla y volver a sacarlo de ella.
Por ejemplo para un mensaje de ayuda cuando alguien envie un form con datos incorrectos. Le sacas un mensaje por un par de segundos (que de tiempo a leerlo) diciendo:
Recuerda: Debes introducir todos los campos marcados con un *

Serapis

#2
8 Abril 2020, 23:43 PM
Cita de: Beginner Web en  8 Abril 2020, 04:09 AM
hola no entiendo esto, supongo es como un timer pero no lo entiendo la verdad  :huh:

De forma simple: Un 'Slider' es como una barra de progreso, se asocia un valor a cada porcentaje (progreso)... Básicamente eso te permite saltarte cálculos matemáticos, al asignar valores predeterminados según el caso.

Beginner Web

#3
9 Abril 2020, 02:32 AM Ultima modificación: 9 Abril 2020, 05:53 AM por Beginner Web
gracias  ;-)
7w7
Imprimir
Ir Arriba Páginas1
Acciones del Usuario