Carga de web línea a línea puro Css 7.7.14
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
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.
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
Kseso
the obCSServer ᛯ 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 Kseso
Funny game.. digo, muy divertido ;)
ResponderEliminargenial
ResponderEliminar