¿Hay alguna manera de ralentizar el efecto de desplazamiento?

3 minutos de lectura

avatar de usuario
S. Fellig

¿Hay alguna manera de ralentizar un efecto de desplazamiento? Tengo un efecto de desplazamiento en mi sitio (eliminado) que muestra texto sobre las imágenes. Quiero ralentizar un poco el efecto. Es un poco chocante lo rápido que cambia la imagen.

¿Como podría hacerlo?

Podrías agregar transiciones css3:

-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;

avatar de usuario
Zhihao

Depende de cómo estés mostrando el texto. Si está cambiando una propiedad CSS, puede hacerlo con transiciones CSS3. A continuación se muestra un ejemplo.

HTML:

<div id="A"></div><div id="B"></div>

CSS:

div {
    height: 100px;
    width: 100px;
    position: absolute;
    top: 0;
    left: 0;

    -moz-transition: opacity 4s; /* Firefox */
    -webkit-transition: opacity 4s; /* Safari and Chrome */
    -o-transition: opacity 4s; /* Opera */
    transition: opacity 4s;
}
#A {
    background: red;
    opacity: 1;
    z-index: 1;
}
#B {
    background: blue;
    opacity: 0;
    z-index: 2;
}
#B:hover {
    opacity: 1;
}

Manifestación

Editar: David Thomas me ha dicho que no puedes cambiar la pantalla con transiciones. He actualizado lo anterior para usar la opacidad.

  • No puedes ‘transicionar’ entre display estados; ciertamente no entre display: block y display: none. El contenido simplemente saltará y luego, quizás, se animará.

    –David Tomás

    22 de junio de 2012 a las 21:56

  • @DavidThomas, gracias por el aviso. no sabia eso ¿Quizás se puede hacer con opacidad? He editado mi respuesta para reflejar eso.

    – Zhihao

    22 de junio de 2012 a las 21:57

  • Sí, puedes hacer la transición opacity. Creo que es una mejor opción aquí.

    – BoltClock

    22 de junio de 2012 a las 21:58


  • opacity y height (y otras propiedades con valores especificados, básicamente no auto) ciertamente puede hacer una transición sin problemas.

    –David Tomás

    22 de junio de 2012 a las 21:58

  • La transición (la no prefijada) siempre debe ser la última

    – enero

    22 de junio de 2012 a las 23:51

Sé que esto es un poco tarde, pero mire las animaciones CSS3. Uso una animación en una de las pantallas de carga de Garry’s Mod.

/* Styles go here */

button {
  margin-left: 50%;
  margin-right: 50%;
}
button:hover {
  -webkit-animation: breathing 5s ease-out infinite normal;
  animation: breathing 5s ease-out infinite normal;
}
@-webkit-keyframes breathing {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  25% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  75% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes breathing {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  25% {
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
  }
  50% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  75% {
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
  }
  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://stackoverflow.com/questions/11164567/style.css">
  <script src="script.js"></script>
</head>

<body>
  <h1>Hello Plunker!</h1>
  <p>Below I have a button that changes size on mouse hover useing CSS3</p>
  <button>Hover over me!</button>
</body>

</html>

Sé que no es exactamente el resultado que busca, pero estoy seguro de que usted y otros pueden encontrarlo útil.

Si lo desea, puede usar jQuery .fadeIn() http://api.jquery.com/fadeIn/

.fundirse( [duration] [, callback] )
duración cadena o número que determina cuánto tiempo se ejecutará la animación.
llamar de vuelta Función para llamar una vez que se complete la animación.

¿Ha sido útil esta solución?