elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Security Series.XSS. [Cross Site Scripting]


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Resuelto] alguien me explica sobre los sliders?
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [Resuelto] alguien me explica sobre los sliders?  (Leído 2,480 veces)
Beginner Web


Desconectado Desconectado

Mensajes: 634


youtu.be/0YhflLRE-DA


Ver Perfil
[Resuelto] alguien me explica sobre los sliders?
« en: 8 Abril 2020, 04:09 am »

hola no entiendo esto, supongo es como un timer pero no lo entiendo la verdad  :huh:

Código
  1. @keyframes sli {
  2.    0% {
  3.        left: 0;
  4.    }
  5.  
  6.    10% {
  7.        left: 0%;
  8.    }
  9.  
  10.    12% {
  11.        left: -100%;
  12.    }
  13.  
  14.    22% {
  15.        left: -100%;
  16.    }
  17.  
  18.    24% {
  19.        left: -200%;
  20.    }
  21.  
  22.    34% {
  23.        left: -200%;
  24.    }
  25.  
  26.    36% {
  27.        left: -300%;
  28.    }
  29.  
  30.    46% {
  31.        left: -300%;
  32.    }
  33.  
  34.    46% {
  35.        left: -300%;
  36.    }
  37.  
  38.    48% {
  39.        left: -400%;
  40.    }
  41.  
  42.    58% {
  43.        left: -400%;
  44.    }
  45.  
  46.    60% {
  47.        left: -300%;
  48.    }
  49.  
  50.    70% {
  51.        left: -300%;
  52.    }
  53.  
  54.    72% {
  55.        left: -200%;
  56.    }
  57.  
  58.    82% {
  59.        left: -200%;
  60.    }
  61.  
  62.    84% {
  63.        left: -100%;
  64.    }
  65.  
  66.    94% {
  67.        left: -100%;
  68.    }
  69.  
  70.    96% {
  71.        left: 0%;
  72.    }


« Última modificación: 9 Abril 2020, 13:43 pm por #!drvy » En línea

7w7
@XSStringManolo
Hacker/Programador
Colaborador
***
Desconectado Desconectado

Mensajes: 2.397


Turn off the red ligth


Ver Perfil WWW
Re: alguien me explica sobre los sliders?
« Respuesta #1 en: 8 Abril 2020, 06:04 am »

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
  1. <!DOCTYPE html>
  2. <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">
  3. </head>
  4.  
  5. <button type="button" class="boton">Soy un átomooooo... xD</button>
  6. .boton {
  7.  position: absolute;
  8.  left: 3vw;
  9.  top: 62vw;
  10.  margin: 4vw auto;
  11.  font-size: 3vw;
  12.  border-top: 1vw solid rgba(255, 255, 255, 0.2);
  13.  border-right: 1vw solid rgba(255, 255, 255, 0.2);
  14.  border-bottom: 1vw solid rgba(255, 255, 255, 0.2);
  15.  border-left: 1vw solid #ffffff;
  16.  display: block;
  17.  border-radius: 1vw;
  18.  padding: 4vw 4vw;
  19.  cursor: pointer;
  20.  color: #fff;
  21.  background-color: rgba(0, 7,90,0.7);
  22.  font-family: 'Roboto';
  23.  border: 0.5vw solid #fff;
  24.  box-shadow: 0.8vw 1.2vw 1.2vw #678;
  25.  width: 60vw;
  26.  height: 12vw;
  27.  outline: none;
  28.  transition-duration: 1.6s;
  29.  -webkit-transition-duration: 1.6s;
  30.  -moz-transition-duration: 1.6s;
  31.  
  32. }
  33.  
  34.  
  35. .boton:hover, .boton:after {
  36.  position: fixed;
  37.  border: 0;
  38.  width: 20vw;
  39.  height: 10vw;
  40.  font-size: 0;
  41.  outline: none;
  42.  border-radius: 100%;
  43.  background-color: transparent;
  44.  background-image: linear-gradient(to right, rgba(0 ,4 , 56 , 0.4), rgba(0, 4, 56,0.8));
  45.  left: 78.5vw;
  46.  top: 117vw;
  47.  -webkit-transform: translateZ(0);
  48.  -ms-transform: translateZ(0);
  49.  transform: translateZ(0);
  50.  -webkit-animation: Atomo 0.1s infinite linear;
  51.  animation: Atomo 0.1s infinite linear;
  52.  box-shadow: none;
  53. }
  54.  
  55. @-webkit-keyframes Atomo {
  56.  0% {
  57.    -webkit-transform: rotate(0deg);
  58.    transform: rotate(0deg);
  59.  }
  60.  100% {
  61.    -webkit-transform: rotate(360deg);
  62.    transform: rotate(360deg);
  63.  }
  64. }
  65. @keyframes Atomo {
  66.  0% {
  67.    -webkit-transform: rotate(0deg);
  68.    transform: rotate(0deg);
  69.  }
  70.  100% {
  71.    -webkit-transform: rotate(360deg);
  72.    transform: rotate(360deg);
  73.  }
  74. }
  75. </body>
  76. </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 *


« Última modificación: 8 Abril 2020, 06:12 am por @XSStringManolo » En línea

Mi perfil de patrocinadores de GitHub está activo! Puedes patrocinarme para apoyar mi trabajo de código abierto 💖

Serapis
Colaborador
***
Desconectado Desconectado

Mensajes: 3.348


Ver Perfil
Re: alguien me explica sobre los sliders?
« Respuesta #2 en: 8 Abril 2020, 23:43 pm »

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.
En línea

Beginner Web


Desconectado Desconectado

Mensajes: 634


youtu.be/0YhflLRE-DA


Ver Perfil
Re: alguien me explica sobre los sliders?
« Respuesta #3 en: 9 Abril 2020, 02:32 am »

gracias  ;-)
« Última modificación: 9 Abril 2020, 05:53 am por Beginner Web » En línea

7w7
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Alguien Me Explica..Api's
Programación Visual Basic
Petro_Boca 5 2,770 Último mensaje 4 Agosto 2010, 07:39 am
por Petro_Boca
¿Alguien me explica?
.NET (C#, VB.NET, ASP)
gonzalo57 5 2,789 Último mensaje 2 Agosto 2012, 14:25 pm
por kub0x
alguien me explica
Windows
pichi_54 2 2,151 Último mensaje 6 Octubre 2012, 16:29 pm
por HdM
Alguien me explica esto?
.NET (C#, VB.NET, ASP)
gonzalo57 1 2,058 Último mensaje 28 Octubre 2012, 15:56 pm
por seba123neo
Alguien me explica esto sobre discos duros
Foro Libre
WIитX 0 1,365 Último mensaje 2 Diciembre 2013, 19:50 pm
por WIитX
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines