magiCSSKroll 5.6.17
Un efecto parallax puro CSS invirtiendo el sentido de desplazamiento del elemento respecto al que sería el esperado al hacer scroll.
magiCSSKroll
Ya son muchas las veces que en el blog he jugado con las transformaciones CSS.Y en otras con el funcionamiento del scroll. Y en alguna ocasión con ambas juntas para lograr con puro CSS efectos de parallax
, como en el post Desplazamiento asíncrono de elementos para un parallax scroll puro Css
En ese ejemplo se juega modificando con la velocidad de desplazamiento al hacer scroll de los distintos elementos. De tal forma que unos vayan más rápidos o lentos que otros. Todo ello gracias a las transformaciones CSS (2D y 3D) y la propiedad CSS perspective.
En esta ocasión vuelvo sobre el efecto parallax con puro CSS
con la función CSS matrix3d() para que el efecto se produzca en el sentido del desplazamiento.
Esto es, que si desplazas la página en un sentido el elemento afectado vaya en el contrario al natural y esperado.
Pero antes de seguir un mínimo recordatorio sobre la propiedad CSS perspective, su complementaria perspective-origin y la función CSS matrix3d() en la propiedad transform. Puedes saltártelo todo y ver la demo.
CSS Perspective
De la propiedad CSS perspective dice la especificación que crea un contexto 3D (tres dimensiones) y que puede usarse para dar algo de profundidad en las webs. Este efecto de profundidad es fruto de dos efectos derivados de ella:
- Modifica el tamaño aparente respecto a otros elementos ya que la propiedad
perspectiveconlleva un efecto de escalado (scale() - La velocidad del movimiento del elemento al hacer scroll es distinta a la del resto de la página.
Un valor positivo en perspective lo acerca en el eje Z, lo escala a mayor tamaño y aumenta su velocidad en el desplazamiento. Si es negativo ocurre al contrario: más lejano y por lo tanto se "ve" más pequeño y lento.
El siguiente vídeo lo explica gráficamente:
CSS Matrix3D()
La propiedad CSS transform: admite una serie de funciones individuales para indicar el tipo y valor de la transformación. También admite usar en lugar de ellas una matriz, 2D o 3D. Matriz que se ve complementada con el vector de dirección la perspectiva. Un ejemplo sería:
.el { transform: matrix3d( 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, -1 ); }
Como ocurre siempre (recuerda los filtros), las posibilidades y potencia es mucho mayor usando una matriz que las funciones simples.
Entre otras, con una matriz podemos añadir "efectos", como por ejemplo afectar al sentido del desplazamiento en caso de que el elemento sea "escrolable".
Con una matriz como la del código previo se consigue que el elemento se desplace en dirección contraria a la natural al hacer scroll. Así si hacemos scroll down, en vez de desplazarse hacia arriba con el resto lo hará hacia abajo.
Todo lo anterior y un poco mas puesto todo junto en un ejemplo. Haz scroll en la caja roja
See the Pen OgPxyR by Kseso (@Kseso) on CodePen.
El origen y autoría del ejemplo están en el pen.
magiCSSKroll
Con todo el rollo previo, con mis disculpas y mil perdones por tanta demora, ya podemos plantearnos un efecto de "parallax" y además que sea usable en una página "real". Vamos a ello.
magiCSSKroll versión 1
En esta demo lo uso para revelar el contenido que hay tras las imágenes. La parte inferior se desplaza hacia abajo. Te recomiendo que veas las demos a página completa.
See the Pen magiCSSKroll 2º by Kseso (@Kseso) on CodePen.
magiCSSKroll versión 2
En la siguiente demo fíjate en el movimiento del header al hacer scroll para acceder al contenido de la página.
See the Pen magiCSSKroll by Kseso (@Kseso) on CodePen.
Más info y créditos
La matriz CSS 3d del artículo de Surma CSS deep-dive: matrix3d() for a frame-perfect custom scrollbar
El último y más reciente documento del W3c sobre las transformaciones CSS: CSS Transform Module Level 2 Editor’s Draft, 2 June 2017
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