¿Necesita un efecto de desplazamiento fresco para algo en su sitio? ¡No busque más! Hemos creado varios ejemplos personalizados que puedes ver en vivo para inspirarte.
Si te gusta el efecto, robalo! Tenemos el CSS listo y esperando que usted lo copie.
Traiga su sitio aburrido a la vida
Los efectos de desplazamiento pueden hacer que su sitio se sienta mucho más dinámico y vivo. Solía ser el caso en el que se requería que JavaScript hiciera algo realmente interesante con un efecto de desplazamiento, pero en estos días CSS3 es capaz de hacer un montón de cosas realmente geniales si está creando lo suficiente.
Los efectos que usaremos hoy en día son códigos de uso que son compatibles con los navegadores modernos, es decir, por supuesto, Mozilla y Webkit en su mayor parte. El soporte de IE es irregular en el mejor de los casos en varias versiones, así que asegúrese de realizar pruebas exhaustivas en su propia implementación. Los elegantes efectos de desplazamiento son una de esas cosas que normalmente se pueden degradar con bastante gracia para que los navegadores más antiguos aún vean algún cambio.
Subir
Demo en vivo: Haga clic aquí para iniciar
Esto funciona mejor cuando tienes una serie de elementos horizontales. De esa manera, cuando pasas el ratón por encima de ellos, obtienes un bonito efecto de onda.
Este es súper fácil de implementar y, de hecho, hay varias formas de hacerlo. Lo que hice a continuación es simplemente aplicar un margen a cada imagen y luego reducir ese margen al pasar el cursor. El margen comienza a 15px, luego se reduce a solo 2px al pasar el mouse, lo que hace que la imagen salte. Fácilmente podría usar este mismo efecto en los elementos de texto si estuvieran en una lista.
La transición aquí es completamente opcional ya que el efecto todavía funciona bastante bien sin ella. Solo para que sea un poco más suave, pese a que introduje un conjunto de animaciones rápidas para simplificar, lo que creo que proporcionó el mejor efecto para este tema en particular.
Bump Up CSS
Apilar y crecer
Demo en vivo: Haga clic aquí para iniciar
Para este, quería una especie de efecto de lámpara de lava para que al mover el mouse hacia abajo en la lista, cada imagen se expanda lentamente y luego vuelva a su tamaño original.
Para lograr esto, inserté una pila de imágenes que tenían 400px de ancho por 133px de alto. Luego dimensioné esas imágenes a 300px por 100px en el CSS y me expandí al pasar el cursor. Dado que tenía una alineación central, el nuevo tamaño de la imagen se eliminó de mi alineación, un margen negativo establecido en la mitad del tamaño del crecimiento en el ancho abordado este problema.
Stack & Grow CSS
Fade Text in
Demo en vivo: Haga clic aquí para iniciar
Para este, quería crear un evento similar a JavaScript en el que pudieras desplazarte sobre un elemento y ver un efecto en otro. Lo que he hecho para lograr esto es lanzar un texto y una imagen a un div y luego flotar todo lo que queda para que el texto esté en línea con la imagen. A continuación, apliqué color: transparente y altura de linea: 0px a la div. Esto coloca el texto en la parte superior de la división y lo oculta.
Para hacer que el texto aparezca al pasar el cursor, simplemente cambié el color y la altura de la línea. Cuando pasas el cursor sobre la imagen, el texto se acerca a la vista. Es un truco bastante bueno considerando que todo es CSS.
Fade texto en CSS
Foto torcida
Demo en vivo: Haga clic aquí para iniciar
Este es super simple pero es un gran efecto para una galería de miniaturas. La premisa básica es que creas una cuadrícula de imágenes y luego configuras las imágenes para rotar cuando pasas el cursor sobre ellas, creando la ilusión de una foto torcida colgada en una pared.
Usaremos muchos CSS nuevos y específicos del navegador en esta aplicación, por lo que es posible que también desee agregar algo para los navegadores más antiguos. Nuestra galería utilizará sombras de caja (opcionales), transiciones y transformaciones para lograr el efecto que deseamos. La transformación manejará la rotación y la transición la hará agradable y suave.
Para llevar esto aún más lejos, podría usar pseudo-selectores para hacer que las imágenes se inclinen en diferentes direcciones.
Crooked Photo CSS
Fade In y reflexionar
Demo en vivo: Haga clic aquí para iniciar
Este es bastante complicado, así que tuve que luchar un poco antes de que se me ocurriera el efecto que me gustaba. El estado predeterminado de la imagen es una opacidad ligeramente reducida.Luego, cuando pasas el ratón sobre él, la opacidad aumenta al máximo, aparece un brillo alrededor de los bordes y aparece un reflejo (solo Webkit).
Desafortunadamente, el reflejo no es algo que responda a una transición, por lo que simplemente aparece de inmediato mientras que el resto se desvanece, pero sigue siendo una transición general bastante agradable.
Si estás confundido acerca de cómo funcionan las reflexiones de CSS, puedes leer todo sobre ellas en un excelente artículo de David Walsh.
Fade In y Reflect CSS
Conclusión
Estos cinco ejemplos deberían ser suficientes para inspirarte a crear tus propios efectos de desplazamiento de CSS impresionantes. Recuerde experimentar con estos, combínelos y agregue su propio estilo para hacerlos más interesantes.
Si has detectado algún efecto de desplazamiento en la web, ¡queremos verlos! Deja un comentario a continuación y vincula a una página con un ejemplo.