Parallax scroll puro Css en todos los contenidos de la página 6.10.13
Un juego y diversión Css: efecto parallax scroll en puro Css. Sólo funcional en Firefox.
Parallax scroll puro Css en todos los contenidos de la página
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.
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.
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.
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
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
Chrome tiene algo parecido, pero no estoy seguro si aún funciona. El problema es que usa 'canvas', de alguna forma hace una "captura" del elemento para usar como fondo. Pero ya sabemos que <'canvas'> hace rato que no acepta atributos, y al final hay que pasárselos con javascript.
ResponderEliminarbackground-image: -WebKit-canvas("miIdentificadorDelCanvas");
document.getCSSContext("2d", "miIdentificadorDelCanvas", ancho, alto);
Hace mucho tiempo había empezado a trabajar con estos métodos para hacer un fondo mosaico, pero como "sprite", tomando solamente una parte de la imagen para repetir. Me costó encontrar los borradores (que nunca funcionaron correctamente) para pasarte el dato del casi equivalente en 'webkit'. No lo quise buscar en la web porque no me acordaba cómo era.
Bien, lo que voy a hacer es imperdonable, pero ya te comenté que no me gustan los cabos sueltos.
EliminarAprovechando que lo encontré, seguí trabajando con el borrador que mencioné arriba. Ahora me funcionó en seguida (aunque sigue siendo borrador). Mirándolo así nomás, me parece que no va a servir de ninguna forma para hacer el efecto parallax en Safari / Chrome, pero vi que no es algo muy comentado ni usado. Quizá popularizarlo sirva para que otros navegadores incorporen el efecto y al fin -quién sabe- mañana podamos usar alguna versión estandarizada.
El punto es que lo subí a coudpen, y aunque ya dejé suficiente información en el comentario anterior como para que quién tenga interés pueda buscar especificaciones y ejemplos ... resulta que no hay muchos publicados.
No voy a poner código, porque como mencioné, 'canvas' no es completamente CSS y HTML, sino que usa JS (que no cabe en este blog) para aplicar (ex-)atributos. Pero si me animo a poner el enlace para que los seguidores de Kseso CSS puedan hacer experimentos.
Sprite in background-image. (Repeated as mosaic.)
Al fin y al cabo, la parte de Mozilla sí es CSS, y aquí se puede ver un uso más para el invento propietario.
Gracias.
Interesante efecto, estaba buscando cosas como estas para estudiar y practicar.
ResponderEliminarComo nota adicional, es posible lograr el efecto en todos los navegadores con el selector :target
Aquí un ejemplo que vi en la web usando esta tecnica: http://www.creativejuiz.fr/blog/tutoriels/css3-effet-parallaxe-sans-javascript, puede ser vista con js desabilitado y funciona perfectamente así que el efecto también es con puro css
Es un truco. (OK, en diseño web todo es "un truco" ;-) ). De hecho, si desplazás el documento con un simple scroll (como corresponde a un verdadero parallax) la animación hace agua por todos lados.
EliminarEn este mismo blog hay varios ejemplos más sobre 'animation', 'transform', 'keyframes' todos disparados con pseudoclases. Seguramente Kseso dejó un par en los artículos que están bajo la Sugerencia.