Scroll half by half pure #CSS 6.8.17

Scroll half by half pure #CSS

Hace ya un buen tiempo que marqué en Codepen con un 💔 un pen de Eduardo Bouças titulado A split screen gallery por un doble motivo:

1. Me gustó el efecto al hacer scroll arriba y abajo.
2. No "me gustó" el que recurriese a jQuery y javascrit para lograrlo

Y entiende ese no me gustó como una vocecita en mi cabeza que sugería que no debería ser tan difícil lograr lo mismo prescindiendo de todo el javasacript: librería jQuery y el Js específico de la demo.

Además de algún detalle CSS como el uso de algún que otro !important y mucha position: fixed cuya ubicación se cambia al vuelo constantemente vía javascript.

Scroll vertical por mitades

Así que, tras todo este tiempo que esa demo ha estado allí olvidada entre mis 💔 pens, este fin de semana me volví a topar con ella y decidí que era un buen momento de atender y hacer caso a la vocecita. Más que nada porque no tenía mejor cosa que hacer y porque se callara de una vez.

Vamos primero con la demo. Enjoy pure CSS

Aviso: Prácticamente todo el CSS está en una @media query que sólo habilita el efecto en anchuras mayores a 700px. Punto de ruptura totalmente arbitrario y elegido al azar.

See the Pen Scroll half by half by Kseso (@Kseso) on CodePen.

Mi recomendación es que veas la demo a pantalla completa. La disfrutarás mejor y podrás apreciar en mayor medida los distintos efectos.

Un mínimo de explicaciones

Como verás si te asomas al código HTML no hay nada extraño: un contenedor general, y un serie de grupos formados por un figure un section para contener cada imagen y bloque de texto respectivos. Todos ellos en un article

El texto siguiente tachado se debe a que para verse correctamente en Firefox he tenido que olvidarme de usar el valor inline-block. La razón: Firefox no incluye la anchura del scrollbar en los 100vw. Se la suma, a diferencia de Chrome y otros.
Así que al final he optado por basar la demo en el flexbox y añadir 1px a la anchura de las cajas para que no compartan la misma línea.

La demo primigenia y fallida la puedes ver aquí.

Si te fijas aún más en el HTML verás una pequeña diferencia entre el primer grupo figure + section con los siguientes: en ese primero el cierre de figure y la apertura de sectión que le sigue comparten línea. En los restantes hay un retorno de carro. Detalle importante.

Eso es así porque facilita usar a nuestro favor el característico espacio en blanco inherente a los elementos display: inline-block que en otras ocasiones tantos quebrantos ocasiona.

El article padre es un flexbox display: flex en el que sus ítems generan nuevas líneas flex-wrap: wrap.

Al declararles a ambos [figure & section] una anchura de width: calc( 50% + 1px); fuerza que no compartan línea. Y para que el primer par de ellos se colocan adyacentes (quepan en una misma línea) y se muestran visibles al cargar la página les quito ese píxel a mayores solo a ellos:

figure:nth-of-type(1), section:nth-of-type(1) { width: 50%; }

Esta pequeña diferencia de 1 píxel en sus anchuras el el segundo grupo de figure + section y siguiente se traduce que al hacer scroll primero se muestre la imagen por completo y ya después aparezca el texto al continuar haciendo scroll.

La colocación a la izquierda o derecha de las imágenes y el texto y su alternancia (ahora a la izquierda y la siguiente a la derecha alternativamente) sólo necesitan de jugar con los márgenes laterales según corresponda declarándolos con un valor de auto. Lo mismo que con las direcciones de la sombra:

figure { margin: 0 auto 10vh 0; box-shadow: 4px -4px 8px rgba(0,0,0,.4); } section { margin: 0 0 10vh auto; box-shadow: -4px -4px 8px rgba(0,0,0,.4); } figure:nth-of-type(1), section:nth-of-type(1) { margin: 0 0 10vh 0; } figure:nth-of-type(2n) { margin: 0 0 10vh auto; box-shadow: -4px -4px 8px rgba(0,0,0,.4); } section:nth-of-type(2n) { margin: 0 auto 10vh 0; box-shadow: 4px -4px 8px rgba(0,0,0,.4); }

El margen inferior 10vh está añadido para darle a los textos inferiores de cada section un poco más de tiempo antes de que sean tapados por la siguiente imagen. Ese margen lo anulo en el último par figure + section:

figure:last-of-type, section:last-of-type { margin-bottom: 0; }

Y para terminar sólo queda el efecto de evitar que al hacer scroll-down los elementos desaparezcan por la parte superior de la pantalla. No debería suponer ningún misterio para los usuarios asiduos del blog: el secreto está en una vieja conocida: position: sticky [2012] que ya he usado para otros #impoCSSible inside en el blog.

El resto de estilos sólo son para hacer un poco más vistosa y atractiva la demo.

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