CSS es una excelente tecnología que puede usar para agregar estilos sorprendentes a una página web y resaltar su lado creativo como diseñador o desarrollador.
Una forma de agregar más características únicas y divertidas a su sitio web son las transiciones de página CSS. Ellos pueden ser transiciones de página CSS puro o tenga un poco de JavaScript para ayudar a crear algunas de las técnicas más avanzadas; de cualquier manera, puede hacer mucho con solo CSS puro.
¡Pasemos directamente y veamos algunas transiciones de página CSS increíbles!
En esta lista, encontrará una combinación de transiciones de página de CSS puro y algunas con un poco de JavaScript para crear algunos efectos sorprendentes, con suerte, uno lo inspirará a crear algo hermoso con él.
Basado en algunos marcos HTML, CSS y JavaScript, este ejemplo le muestra cómo puede crear una impresionante transición de página basada en eventos.
Haga clic en el botón “Inicio” y observe el efecto. También puede configurar esto para ir a varias páginas, pero la demostración viene con una sola página.
Un efecto de transición de página CSS en mosaico que se puede usar para cambiar entre diferentes contenidos.
Haga clic en el botón en el medio y observe cómo se produce el efecto, la transición es súper suave y muy atractiva. También puede agregar fácilmente más elementos a la nueva página.
Esta demostración tiene varios efectos geniales que se ejecutan a la vez, y todos se unen para crear una transición CSS sorprendente cuando se hace clic. Pase el cursor sobre la imagen e interactúa con el movimiento del mouse.
Haga clic en la imagen y se escala a la vista como una imagen de pantalla completa más grande, puede cambiar esto fácilmente y agregar texto o elementos adicionales para crear más de una página.
Un efecto de transición de CSS puro basado en deslizamiento de cortina que le permite cambiar entre contenido, la demostración es bastante básica y no tiene mucho estilo, pero puede editar fácilmente el CSS para cambiarlo.
Muy simple y fácil de usar en su sitio web.
Una transición súper simple que crea una hermosa animación de página con forma circular.
Este ejemplo de transición utiliza JavaScript y la biblioteca Anime.js y, por lo tanto, no es una solución de CSS puro.
Pero si no le importa el JS, este efecto es perfecto para las transiciones entre las páginas de su sitio.
Un menú completamente completo basado en CSS y JavaScript con transiciones suaves entre páginas.
Haga clic en los botones del menú y observe la transición genial entre cada página, puede navegar de regreso a casa usando el botón central, cada página también tiene su propio color, pero puede agregar fácilmente una imagen de fondo si lo desea.
Una demostración de transición de página súper genial y elegante basada en CSS y JavaScript que desliza el contenido nuevo a la vista.
Las animaciones son realmente fluidas y es fácil agregar tus propios elementos o páginas adicionales. La demostración utiliza un botón para activar las transiciones.
Un efecto de transición CSS deslizante con botones a la izquierda que activan la transición de página. Las páginas son de pantalla completa y se deslizan hacia adentro y hacia afuera con el contenido, puede agregar más elementos en el HTML y cada página tiene un título.
La transición es muy suave y es excelente para contenido de pantalla completa.
Una demostración elegante y genial que se crea como una cartera, tiene un fondo animado y puede hacer clic en el botón “Ver cartera” para ver la transición de la página.
La animación es muy fluida y, obviamente, en esta demostración, necesitaría agregar su propio contenido y elementos, pero todo el efecto de transición está ahí.
Algunas transiciones de página CSS se activan al hacer clic en un botón, pero otro uso para ellas es cambiar entre las páginas que necesitan cargarse.
Este ejemplo nos muestra cómo puede usar un cargador de transición CSS para cargar contenido en segundo plano y luego mostrar la página cuando esté lista, todo está animado usando CSS y es muy fluido.
Las transiciones de página CSS se pueden usar para todo tipo de cosas, uno de los mejores casos de uso es la transición de una imagen a más texto/información.
Esta transición de página usa una miniatura que, cuando se hace clic, muestra un fondo más grande y algo de texto para explicar en qué se hizo clic, luego puede usar la cruz en la parte superior derecha para cerrar la página y hacer clic en otra. Utiliza algo de JavaScript pero nada demasiado complicado.
Creada con HTML y CSS puros, esta transición comienza al cargar la página. Puede usar este efecto para hacer que los elementos aparezcan en un desplazamiento o cuando se carga una página.
También podría combinarse con JavaScript básico para activar la animación al hacer clic o entre varios elementos. De cualquier manera, este puede ser un gran punto de partida para las transiciones de página CSS.
Un gran ejemplo de cómo puede verse una transición de página simple.
Este ejemplo utiliza una solución de CSS casi puro para crear la animación entre páginas.
No hay bibliotecas JS externas y las pocas líneas de JavaScript son súper básicas para lidiar con los clics, la detección del final de las animaciones y la carga de la página.
Otra transición de página CSS de desplazamiento ahora, esta es más completa y funciona con varias páginas. En este ejemplo, puede ver que hay 8 diapositivas para desplazarse, intente desplazarse y ver la animación elegante cambiar entre diferentes páginas.
Cada diapositiva tiene su propio título y subtítulo, y también hay un contador de diapositivas en el lado izquierdo.
Una transición de página CSS basada en el desplazamiento, el fondo se deslizará hacia adentro y hacia afuera, lo que le permitirá mostrar diferentes imágenes o incluso elementos si tuviera que cambiarlo, lo que podría hacerse muy fácilmente en el HTML.
Incluso hay una paginación básica en la parte inferior con el número de página y los puntos de indicación.
Una transición CSS más única, este es un botón que pasa a una página que tiene un título y un cuerpo principal de texto.
Puede usar esto fácilmente para configurar varios botones y hacer que las páginas se muestren sobre la página principal como un modal. Muy moderno y le permite permanecer en la misma página en general.
Las transiciones de página CSS se pueden usar para muchas cosas y esta se usa inicialmente para ocultar un menú de pantalla completa, una vez que se hace clic, se abre el menú y sus diferentes páginas.
Puede desplazarse a cada página usted mismo o usar el botón de menú para seleccionar una sección y pasar a cada sección en la pantalla.
Toda la configuración con esta demostración es genial, el diseño en sí es muy atractivo y no es solo una demostración de funcionalidad básica; en realidad, puede ver cómo se puede usar este efecto de transición dentro de un sitio web real.
Al hacer clic en el botón “Leer más”, comenzará la primera transición, el contenido se escala y se desliza a la vista: se muestra más texto y la imagen principal se vuelve más pequeña para dejar espacio para el texto.
Haga clic en “Ver mapa” para luego ver la transición final del mapa apareciendo y el texto desapareciendo; luego tiene el paso final para regresar a la página de inicio.
Un diseño de pantalla completa que, cuando se hace clic, cada sección se abre y se escala a la vista. La transición CSS crea un diseño de pantalla completa de cada sección cuando se hace clic.
Cada sección tiene su propio botón de cierre para que pueda volver a la pantalla original. Podría agregar fácilmente más elementos a cada sección.
¿Cómo se hace una transición suave en CSS?
Asegúrese de animar solo los elementos que necesita y no incluya demasiados elementos, lo que puede requerir muchos recursos para algunos dispositivos; CSS generalmente creará una transición suave para usted mediante el algoritmo de curva cúbica de Bézier. Con esta función, puede personalizar la aceleración y desaceleración de su transición para generar una transición suave.
Pensamientos finales
Con suerte, ha encontrado algunas transiciones de página que le gustan y puede usar en sus propios proyectos; puede tomar estos ejemplos y crear su propio efecto único en sus sitios web.
Algunos ejemplos aquí son solo demostraciones de funcionalidad básica, pero algunos son más completos que otros, por lo que debe encontrar algo que se adapte a su conjunto de habilidades y necesidades con lo que desea usar para las transiciones de página CSS.
Artículos relacionados
Sobre el Autor:
lucas embrey es un desarrollador full-stack, BSc en Ciencias de la Computación y con sede en el Reino Unido.
Puedes saber más sobre él en https://lukeembrey.com/
