soy Kseso y esto EsCSS

Parallax scroll puro Css en todos los contenidos de la página

Parallax scroll puro Css en todos los contenidos de la página

·Por Kseso ✎ 4

La tentación de emular en puro Css el efecto parallax a todas las cajas principales de una página y plantearte si eres capaz de averiguar cómo está logrado, lo confieso, fue irresistible.

Pese a que lo que sigue es puro divertimento Css, escasamente práctico y usable (avisado quedas) pues sólo es funcional si lo navegas con Firefox, porque todo se basa en el uso de un valor privativo de este navegador que no tiene equivalentes en los otros. Al menos hasta donde yo recuerdo.

Es por esta limitación que primero te pongo un vídeo de su funcionamiento y después ya vemos.

Video: Parallax pure Css múltiples elementos

Parallax puro Css: su html

<hr class='uno' /> <h1 class='openwebicons-federated'>Hey! Scroll me, Please!</h1> <hr class='dos' /> <h2 class='openwebicons-geo'>Hey baby!</h2> <hr class='tres'/> <h3 class='openwebicons-semantics'>Otro más pa´bajo</h2> <article id='uno' class='openwebicons-openid'> <p>Parallax pure CSS.<br/> Only for FF</p> </article> <article id='dos' class='openwebicons-connectivity'> <p>Hola mundo mundial</p> </article> <article id='tres' class='openwebicons-foaf'> <p>Another Kseso´s CSS game</p> </article>

Sólo necesitas fijarte en el anterior html para estar prevenido. Algo raro tramo. ¿Eres consciente de la "trampa"? Observa ese marcado nada usual: los 'hnº' todos al inicio, separados del contenido principal (que serías los 'articles') y entre ellos (los 'hnº') esos separadores ('hr') sin sentido aparente.

Ver Demo. Sólo Firefox

Parallax puro Css: la magia del Css

Posíblemente contribuya a tu desconcierto si miras el Css asociado a los 'articles' y ves que debería estar amontonados todos juntos. Sin embargo no se muestran donde deberían y Firefox los dibuja intercalados entre los 'hnº'

article { position: absolute; left: 0; top: 0; }

La explicación corta y sencilla es que lo que ves no es lo que crees que estás viendo. Lo que crees que es un 'article' en realidad es uno de los separadores o 'hr' convenientemente disfrazado como un 'article':

hr { height: 100vh; display: block; background: rgba(0,0,0,0); pointer-events: none; }

Todo lo dicho hasta el momento no aclara el efecto. Porque pese a que los 'hr' admiten estilos son elementos vacíos Se cierran sobre sí mismos en la etiqueta (tag) de apertura. Esto es, podemos cambiar su apariencia pero no admiten contenidos en ellos.

Desvelando el secreto

Contenido no admiten como decía. Y otro hándicap es que el efecto parallax sólo cobra sentido cuando podemos evitar que no haya desplazamiento al hacer scroll.

Desplazamiento que es inherente a los contenidos de una caja que se desplazan con ella. La excepción es si cambiamos el valor de 'position' a 'fixed' en algún elemento. No porque se cambie la máxima de que el contenido se mueve con su continente (esto se mantiene), sino porque su contenido (o caja referente para la posición) es el viewport y este permanece siempre en el mismo lugar.

Pero este comportamiento de los contenidos no obliga a los fondos o backgrounds que se colocan como "fixed" (propiedad 'background-attachment').

Así que valíendonos de esta particularidad ya sólo necesitamos que el contenido de los 'articles' deje de comportarse como tal y lo haga como un background.

Esto se consigue con la el valor privativo y único de Firefox que mencionaba al inicio para los fondos: -moz-element(#id), donde la cadena de texto '#id' será el identificador único de cualquier elemento presente en el documento.

hr.uno { background: -moz-element(#uno) no-repeat center center #34495e; background-attachment: fixed; } hr.dos { background: -moz-element(#dos) no-repeat center center #16a085; background-attachment: fixed; } hr.tres { background: -moz-element(#tres) no-repeat center center #DBB25A; background-attachment: fixed; }

Este valor lo que hace es usar el elemento con el '#id' indicado como fondo (background) del elemento al que se declara. Para una explicación más detallada ver el artículo Elementos del html como imagen del background con "-moz-element"

Y todo lo anterior para lo siguiente, ahora sí en vivo y directo

See the Pen Parallax pure Css by Kseso (@Kseso) on CodePen

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