La importancia de agregar transiciones de p\u00e1gina CSS<\/h2>\n
Aunque pueda parecer que la animaci\u00f3n<\/a> no importa tanto cuando se crea un sitio web animado<\/a>, o al menos no tanto como la capacidad de respuesta y la usabilidad b\u00e1sica del sitio, la verdad es que la animaci\u00f3n puede marcar la diferencia entre un sitio web exitoso y atractivo. sitio y un di\u00e1metro total.<\/p>\n Las transiciones de p\u00e1gina representan una pr\u00e1ctica que a menudo se pasa por alto en el dise\u00f1o web, y es una l\u00e1stima considerando lo impactantes que son. Pueden cambiar toda la sensaci\u00f3n de un sitio web y la experiencia que los visitantes tienen con \u00e9l<\/a>.<\/p>\n Muchos dise\u00f1adores tienden a evitar las animaciones porque creen que son comedores de recursos que solo arrastrar\u00e1n el sitio web hacia abajo y lo ralentizar\u00e1n. Eso sucede solo si las animaciones no se implementan correctamente, y aqu\u00ed es donde las transiciones de p\u00e1gina CSS cambian el juego.<\/p>\n Son formas creativas y eficientes de agregar animaciones fluidas a su sitio web. CSS es una herramienta poderosa que puede ayudar a un sitio web a desarrollar su personalidad, y a continuaci\u00f3n encontrar\u00e1 una lista de ejemplos que deber\u00edan inspirarlo a usar las transiciones de p\u00e1gina CSS para su propio sitio:<\/p>\n Este dise\u00f1o de transici\u00f3n de p\u00e1gina web fue creado por Nikolay Talanov y solo se ve bien en pantalla completa en un escritorio grande. La idea original se implement\u00f3 en HTML5 canvas, pero Nikolay la ha adaptado inteligentemente a una versi\u00f3n CSS.<\/p>\n Las transiciones de la p\u00e1gina CSS se ven muy bien, pero la desventaja es que los usuarios pueden experimentar algunos bloques que se sacuden o desaparecen si los valores del \u00edndice z de su sitio no est\u00e1n configurados correctamente.<\/p>\n Esta transici\u00f3n de p\u00e1gina fue creada y lanzada por Foliodot y es una de las favoritas en el mercado. Tiene una p\u00e1gina lista para usar y transiciones de secci\u00f3n que son simplemente hermosas. Se ver\u00edan incre\u00edbles en cualquier sitio web, independientemente de su tipo.<\/p>\n Nikolai Talanov ide\u00f3 una de las mejores transiciones de p\u00e1gina CSS que ver\u00e1s. Talanov hizo este concepto teniendo en cuenta que muchas personas usan sus teclados para navegar en un sitio, simplemente haciendo clic hacia arriba y hacia abajo.<\/p>\n Las transiciones de p\u00e1gina funcionan bien de esta manera y tambi\u00e9n responden bastante bien. Sin embargo, tambi\u00e9n hay algunos problemas de rendimiento. El contenido tiende a cargarse m\u00e1s lentamente al principio y los usuarios pueden encontrar problemas al abrir una p\u00e1gina con toneladas de contenido.<\/p>\n MirkoZoric cre\u00f3 estas transiciones de p\u00e1gina CSS explorando el estilo Swiper. Utiliza el popular efecto de paralaje y juega con los filtros para conseguir un efecto sorprendente.<\/p>\n Lollipop, como Jeff McCarthy llam\u00f3 a su transici\u00f3n de p\u00e1gina, es similar a la apariencia de Android 5.0. La transici\u00f3n de p\u00e1gina imita la animaci\u00f3n de caj\u00f3n\/carpeta de Android 5.0 Lollipop, que utiliza un efecto circular similar a una piruleta.<\/p>\n Kontext fue creado por Hakim El Hattab y es bastante sencillo: es una transici\u00f3n de cambio de contexto que enfatiza que el contexto de la p\u00e1gina ha cambiado. Probablemente est\u00e9 acostumbrado a este tipo de transici\u00f3n si ha usado un dispositivo que ejecuta iOS.<\/p>\n Otro de NikolayTelanov, esta transici\u00f3n de p\u00e1gina se basa en el prototipo de sitio web satelital<\/a> y se crea agregando 2 clases con JavaScript y un simple desplazamiento. Esta es una funci\u00f3n de demostraci\u00f3n y tiene animaciones de encadenamiento.<\/p>\n Es una transici\u00f3n receptiva que tambi\u00e9n es f\u00e1cil de mantener en cuanto a SCSS.<\/p>\n wpDataTables<\/a> puede hacerlo de esa manera. Hay una buena raz\u00f3n por la que es el plugin de WordPress n.\u00ba 1 para crear tablas y gr\u00e1ficos receptivos.<\/p>\n Un ejemplo real de wpDataTables en la naturaleza<\/p>\n Y es muy f\u00e1cil hacer algo como esto:<\/p>\n Y no solo es bonito, sino tambi\u00e9n pr\u00e1ctico. Puede crear tablas grandes con hasta millones de filas<\/a>, o puede usar filtros y b\u00fasquedas avanzados<\/a>, o puede volverse loco y hacerlo editable<\/a>.<\/p>\n "S\u00ed, pero me gusta demasiado Excel y no hay nada de eso en los sitios web". S\u00ed, lo hay. Puede usar formato condicional<\/a> como en Excel o Google Sheets.<\/p>\n \u00bfTe dije que tambi\u00e9n puedes crear gr\u00e1ficos<\/a> con tus datos? Y eso es solo una peque\u00f1a parte. Hay muchas otras caracter\u00edsticas<\/a> para ti.<\/p>\n Nicolas Engler cre\u00f3 estas traducciones que se parecen a las que puedes ver en Uber. Pasan de una diapositiva a otra con mucha fluidez y son perfectos para interfaces sencillas.<\/p>\n Como sugiere el nombre, a Paul Noble se le ocurri\u00f3 una idea interesante que usa el patr\u00f3n de carrusel, solo que se basa en una transici\u00f3n de panel dividido en diferentes dimensiones de \u00e1rbol. Este es uno de los estilos de transici\u00f3n de p\u00e1gina CSS m\u00e1s utilizados con seguridad.<\/p>\n Mehmet Burak Erman es el creador de este hermoso efecto de revelaci\u00f3n de p\u00e1gina. Fue construido en un estilo de m\u00faltiples capas, con la ayuda de HTML, CSS y JavaScript. Actualmente, la transici\u00f3n de p\u00e1gina es compatible con Chrome, Firefox, Opera y Safari.<\/p>\n Milan Ricoul cre\u00f3 esta transici\u00f3n de p\u00e1gina de mosaicos utilizando CSS y ha obtenido un gran reconocimiento. Milan lo cre\u00f3 usando la combinaci\u00f3n cl\u00e1sica de HTML, CSS y JavaScript y es compatible, como el de Mehmet Erman, con la mayor\u00eda de los navegadores.<\/p>\n Esta es una de las transiciones de p\u00e1gina CSS creadas por Muna. Inicialmente se inspir\u00f3 en ReAlign 2 en el sitio web de Dribble usando CSS, pero tambi\u00e9n se basa en HTML y JavaScript. En comparaci\u00f3n con otras transiciones de p\u00e1gina en la Web, esta tambi\u00e9n es compatible con Microsoft Edge.<\/p>\n No hay mucho que decir sobre esta transici\u00f3n de p\u00e1gina, es exactamente como se llama: simple. Fue creado por ktsn y est\u00e1 basado en HTML-Pug, CSS\/SCSS y JavaScript con vue.js. Deber\u00edas probarlo si buscas algo simple pero impresionante.<\/p>\n Tobias Glaus es el creador de esta sencilla animaci\u00f3n de contenido y men\u00fa. Se basa en un efecto de revelaci\u00f3n simple, pero es tan efectivo como deber\u00eda ser. Si solo desea una transici\u00f3n de p\u00e1gina CSS b\u00e1sica con ese estilo de revelaci\u00f3n con clase, esta es una de sus mejores opciones.<\/p>\n Esta es una pieza de c\u00f3digo en la que a\u00fan est\u00e1 trabajando Rachel Smith, pero tiene un gran potencial. No est\u00e1 listo para usarse como una transici\u00f3n completa, pero su creador lo ha ofrecido para probarlo. Una vez completada, la transici\u00f3n se podr\u00e1 utilizar en todos los navegadores y se podr\u00e1 acceder a ella desde todas las plataformas.<\/p>\n Este es el proyecto de MergimUjkani y la transici\u00f3n consiste en una pantalla simple con botones\/men\u00fas para navegar. Si recuerda c\u00f3mo se apagaban los televisores antiguos al reducir el tama\u00f1o de la pantalla a una l\u00ednea delgada, ya sabe c\u00f3mo se ve esta transici\u00f3n.<\/p>\n Aquellos que necesitan transiciones de p\u00e1gina CSS antiguas deber\u00edan probar esta.<\/p>\n Esta transici\u00f3n perfecta de una miniatura a una p\u00e1gina de pantalla completa es absolutamente imprescindible. Steve Gardner us\u00f3 animaciones CSS y Angular para armarlo. Al usarlo, puede expandir cualquier miniatura en un fondo de tama\u00f1o completo.<\/p>\n A ArsenZbidniakov se le ocurri\u00f3 este concepto de precargador que se puede usar cada vez que abre una nueva p\u00e1gina en un sitio web. Consiste en un cargador circular SVG que tiene un efecto de transformaci\u00f3n adicional.<\/p>\n Esta transici\u00f3n de p\u00e1gina CSS funcionar\u00eda bien en sitios web visionarios con mucho contenido multimedia.<\/p>\n Alberto Hartzet cre\u00f3 este men\u00fa CSS<\/a> de navegaci\u00f3n de una p\u00e1gina que incluye algunas secciones y transiciones CSS puras. Es adecuado para sitios web, portafolios y otros sitios m\u00e1s simples que funcionan bien con un dise\u00f1o de una p\u00e1gina.<\/p>\n Sarah Drasner cre\u00f3 una peque\u00f1a demostraci\u00f3n para estas transiciones de p\u00e1gina CSS. Ella lo cre\u00f3 usando GreenSock y SVG. Las transiciones de p\u00e1gina en React funcionan sin problemas y se ven geniales al mismo tiempo, as\u00ed que adelante, pru\u00e9balo.<\/p>\n Tanto el estilo como la animaci\u00f3n de esta transici\u00f3n est\u00e1n realizados \u00edntegramente en CSS por David Marland. Funciona sin problemas y contiene algo de JavaScript para agregar clases. La transici\u00f3n se puede pausar hasta que se reemplace el contenido. Esta es una animaci\u00f3n de dos etapas.<\/p>\n La \u00faltima en nuestra lista de transiciones de p\u00e1gina CSS, esta transici\u00f3n de navegaci\u00f3n vertical CSS pura de Alberto Hartzet tiene un dise\u00f1o cl\u00e1sico para sitios web de una p\u00e1gina. Una vez m\u00e1s, la transici\u00f3n es muy simple pero agrega un toque agradable al sitio web.<\/p>\n Hay mucha competencia para mantenerse al d\u00eda con las tendencias en esta industria, por lo que no es de extra\u00f1ar por qu\u00e9 es tan dif\u00edcil decidirse por algo tan simple como una transici\u00f3n de p\u00e1gina.<\/p>\n Las transiciones de p\u00e1gina CSS le brindan una manera f\u00e1cil de animar su sitio web sin que se cargue lentamente. Adem\u00e1s, promueve una apariencia m\u00e1s fresca y agrega ese toque de profesionalismo a cualquier sitio web.<\/p>\n Las transiciones de p\u00e1ginas CSS han recorrido un largo camino en los \u00faltimos a\u00f1os, y los usuarios deben aprovecharlas para mejorar su UX y mantener a los usuarios felices haciendo clic o desplaz\u00e1ndose.<\/p>\n Si disfrut\u00f3 leyendo este art\u00edculo sobre las transiciones de p\u00e1gina CSS, debe consultar este sobre los efectos de brillo de texto CSS .<\/a><\/p>\n Tambi\u00e9n escribimos sobre algunos temas relacionados, como el men\u00fa m\u00f3vil CSS<\/a>, el cuadro de b\u00fasqueda HTML<\/a>, la galer\u00eda<\/a> de im\u00e1genes CSS, el editor<\/a> CSS y los efectos<\/a> de desplazamiento de im\u00e1genes CSS .<\/p>\nEjemplos de transiciones de p\u00e1gina CSS<\/h2>\n
Dise\u00f1o genial con transiciones de p\u00e1gina elegantes y men\u00fa fuera del lienzo<\/h3>\n
![\"Excelentes](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-181787-61e874c4614be.jpg\")
<\/a><\/p>\nfolio.transiciones<\/strong><\/h3>\n
![\"Excelentes](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-181787-61e874c54dc1f.jpg\")
<\/a><\/p>\nPaginaci\u00f3n y dise\u00f1o con div de fondo recortado<\/strong><\/h3>\n
![\"Excelentes](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-181787-61e874c6442d6.jpg\")
<\/a><\/p>\nTransiciones deslizantes<\/strong><\/h3>\n
![\"Excelentes](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-181787-61e874c748f91.jpg\")
<\/a><\/p>\nTransici\u00f3n de piruleta<\/strong><\/h3>\n
![\"Excelentes](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-181787-61e874c84bf91.jpg\")
<\/a><\/p>\ncontexto<\/strong><\/h3>\n
![\"Excelentes](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-181787-61e874c93a719.jpg\")
<\/a><\/p>\nDise\u00f1o genial con animaci\u00f3n encadenable compleja<\/strong><\/h3>\n
![\"Excelentes](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-181787-61e874ca4219b.jpg\")
<\/a><\/p>\nOye, \u00bfsab\u00edas que los datos tambi\u00e9n pueden ser hermosos?<\/h3>\n
![\"Excelentes](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-181787-61e874cb4224b.png\")
<\/a><\/p>\n\n
Transiciones de texto tipo Uber<\/strong><\/h3>\n
![\"Excelentes](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-181787-61e874cc68791.jpg\")
<\/a><\/p>\nCarrusel 3D dividido<\/strong><\/h3>\n
![\"Excelentes](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-181787-61e874cd69ef9.jpg\")
<\/a><\/p>\nEfecto de revelaci\u00f3n de p\u00e1gina multicapa ficticia<\/strong><\/h3>\n
![\"Excelentes](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-181787-61e874ce6b7ae.jpg\")
<\/a><\/p>\nTransici\u00f3n de p\u00e1gina de mosaicos (CSS)<\/strong><\/h3>\n
![\"Excelentes](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-181787-61e874cf5707b.jpg\")
<\/a><\/p>\nP\u00e1gina de transici\u00f3n del art\u00edculo<\/strong><\/h3>\n
![\"Excelentes](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-181787-61e874d05a415.jpg\")
<\/a><\/p>\nTransici\u00f3n de p\u00e1gina simple<\/strong><\/h3>\n
![\"Excelentes](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-181787-61e874d14ec4f.jpg\")
<\/a><\/p>\nRevelar animaci\u00f3n de contenido (y men\u00fa)<\/strong><\/h3>\n
![\"Excelentes](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-181787-61e874d2407ae.jpg\")
<\/a><\/p>\nEfecto de transici\u00f3n de p\u00e1gina de tarjeta desplegable<\/strong><\/h3>\n
![\"Excelentes](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-181787-61e874d34b0db.jpg\")
<\/a><\/p>\nTransiciones de p\u00e1gina<\/strong><\/h3>\n
![\"Excelentes](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-181787-61e874d4630d7.jpg\")
<\/a><\/p>\nTransici\u00f3n de miniatura a p\u00e1gina de pantalla completa<\/strong><\/h3>\n
![\"Excelentes](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-181787-61e874d56f6c7.jpg\")
<\/a><\/p>\nCargador de transici\u00f3n de p\u00e1gina<\/strong><\/h3>\n
![\"Excelentes](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-181787-61e874d69247e.jpg\")
<\/a><\/p>\nMen\u00fa CSS de navegaci\u00f3n de una p\u00e1gina<\/strong><\/h3>\n
![\"Excelentes](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-181787-61e874d79a576.jpg\")
<\/a><\/p>\nTransiciones de p\u00e1gina animadas de React<\/strong><\/h3>\n
![\"Excelentes](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-181787-61e874d8a8d27.jpg\")
<\/a><\/p>\nTransici\u00f3n de dise\u00f1o de materiales<\/h3>\n
![\"Excelentes](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-181787-61e874d9b29f2.jpg\")
<\/a><\/p>\nCSS puro Navegaci\u00f3n vertical de una p\u00e1gina<\/h3>\n
![\"Excelentes](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-181787-61e874dabdeeb.jpg\")
<\/a><\/p>\nPensamientos finales sobre estas transiciones de p\u00e1gina CSS<\/h3>\n