soy Kseso y esto EsCSS

Carga de web línea a línea puro Css

Cargando una web línea por línea y tras una línea la siguiente en puro Css. Otra demo de un imposible Css hecho posible.

Carga de web línea a línea puro Css

·Por Kseso ✎ 2
Carga de página línea a línea puro Css

Los más o menos habituales del blog ya me habrán leído en otras ocasiones que los imposibles en Css no lo son tanto con un poco de imaginación.

Pues este juego Css no deja de ser eso, otro de mis "imposibles css": cómo lograr cargar una página carácter a carácter y linea tras línea en puro Css.

De entrada y para no dejar lugar a dudas: es imposible hacerlo. Pero no aparentar que ello sucede. Sólo es cuestión de ocultar de alguna forma el contenido de la página y acto seguido ir mostrándola paso a paso y línea a línea.

De entrada segunda: la idea no está pulida ni trabajada para que sea funcional en cualquier situación y navegador. Necesitarás ver la demo en los que soporten las animaciones y Keyframes Css. Y además, al estar construida en base a las unidades relativas al viewport... pues eso, la altura de la ventana también influirá algo.

Aclarado lo anterior, aquí tienes el pen con la demo. Al situar el cursor sobre ella verás aparecer un rótulo que dice RERUN. Pínchalo para recargarla y ver el efecto.

See the Pen Añoranza by Kseso (@Kseso) on CodePen.

Ver demo a full

La idea y su desarrollo

Como ya comenté, Css no permite un control en la carga y muestra carácter a carácter o línea a línea. Así que toca imaginarse cómo emularlo.

Línea a línea

Dejamos pues que la carga se realice como debe y lo que hacemos es ocultar todo el contenido con ayuda de un pseudoelemento, en la demo recurro a html:after, posicionado y dimensionado, que será el que vaya dejando ver línea tras línea (revelado vertical):

html:after { content: ''; background: #000084;/*el mismo color que el bg del html*/ position: fixed; bottom:-4.5vh; left:0; width: 100%; height: 100vh; }

Quizás te llame la atención los valores declarados en 'height' y 'bottom'. Estoy dejando un espacio en la parte superior de la ventana sin cubrir. Casualmente se corresponde con el primer renglón o línea:

html { font-family: "Courier New", monospace; font-size: 3vh; line-height: 150%; }

Además sólo cubro "la ventana", con independencia de que haya o no scroll. "Lo que no se ve no existe", dicen xD ;-)

Carácter a carácter

Para ocultar esa primera línea y poder mostrar progresivamente "carácter tras carácter" o el revelado horizontal de cada línea recurro de nuevo a un pseudoelemento:

html:before { content: ''; background: #000084; position: absolute; top:0; left:0; width: 100%; border-left: 3vh solid #fff;/*el cursor intermitente*/ height: 4.5vh;/*La altura sin cubrir por html:after*/ z-index: 5; }

Animando el revelado

Perfecto, a estas alturas ya cargamos la página con su contenido pero sólo vemos un bonito azul "pantalla de la muerte" o DOS. Vamos a ir mostrándolo. Para ello nada como las animaciones Css y sus Keyframes.

Revelado vertical

Para revelar cada línea es sencillo. Sólo necesitamos ir acortando la altura del html:after:

html:after { animation: after 1 steps(22) 22s forwards; } @keyframes after { 0%{height: 100vh;} 100%{height: 0} }

Le estoy diciendo con la animación que sólo se ejecute una vez en 22 segundos, que lo haga "a saltos" en 22 pasos (steps) y que al terminar la animación se mantenga en el último frame (altura:0)

El porqué del número 22. Recuerda que la altura del html:before y de cada línea son 4.5vh (line-height: 150% del font-size: 3vh). Y si dividimos la altura de la ventana (100vh) entre la altura de línea... ~22

Revelado horizontal en cada línea

Con lo anterior mostraríamos cada nueva línea de golpe. Así que para poder emular el revelado "carácter a carácter" animamos el otro pseudoelemento del html.

Son necesarias dos animaciones. Una que acorte su anchura y otra para que eso lo haga en todas y cada una de las líneas que se muestran en la ventana:

html:before { animation: ancho 22 linear 1s forwards, alto 1 steps(22) 22s; } @keyframes ancho { 0% {left:0} 100% {left: 100vw;} } @keyframes alto { 0% {top:0;} 100% {top: 100vh} }

La primera animación '@keyframes ancho' la realizamos 22 veces (el valor ya es conocido) durante 1 segundo cada una y ayudada por la segunda '@keyframes alto' nos aseguramos que la anterior keyframes se hace cada vez en la siguiente línea.

Espero que aunque esta demo no sea "para producción" al menos te ayude cuando te enfrentes a "imposibles Css" para verlos desde otro punto de vista y así hallar la forma de hacerlos realidad.

Juega y disfruta con Css

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso