soy Kseso y esto EsCSS

Transición animada del título al cuerpo del artículo

Sencilla forma de pasar de forma animada del título (header) a pantalla completa al cuerpo o contenido del artículo realizado en puro Css.

Transición animada del título al cuerpo del artículo

·Por Kseso ✎ 5
Transición entre el título y el cuerpo del artículo

Una de los muchas ideas que estuve barajando en la última remodelación del blog fue añadir algún efecto para pasar del título o header de los artículos a su contenido.

La idea era que haciendo un mínimo de scroll (o clicando un elemento al efecto) se pasase de ver el encabezado de la página (que ocupa el 100% de la ventana al cargarla) a mostrar el contenido y que la transición se hiciese con algún efecto.

Al final no implementé esta idea por razones que no hacen al caso.

Y cuál ha sido mi sorpresa cuando, tras implementar este nuevo tema, he visto esta misma idea desarrollada en dos artículos. Ni que decir tiene que mucho mejor sus demos que lo que yo había comenzado a desarrollar.

  1. Mary LouLa primera lleva como sello de calidad y vistosidad el de todos los trabajos que codrops publica. En este caso su autora es Mary Lou y lleva por título Inspiration for Article Intro Effects
  2. harry atkinsLa segunda la encontré en webdesignerdepot firmada por Harry Atkins bajo el título How to create a scrollable splash screen with CSS3 and jQuery

Al activarse la transición y sus efectos con el scroll están obligadas ambas demos a apoyarse en javascript, pues hoy por hoy, visto la escasa evolución e implementación de position: sticky, no hay camino en Css para ello.

Pero... y siempre encuentro algún pero, si nos olvidamos de ese detalle nimio sí que es posible plantearse lograr el paso entre el header y el cuerpo en puro Css.

Todo está en un poco de imaginación, y realizar el cambio entre declaraciones que afectan al título y al contenido ofreciendo un elemento (texto o icono) para actuar sobre él.

El viejo recurso del :checked

Todo se reduce a pisar unas declaraciones iniciales del título y del artículo por otras al chequear (:checked) un input estilizado al gusto.

Los efectos para pasar de mostrar un elemento u otro tras el click sólo son cuestión de la imaginación y gusto de cada uno. Seguro que los dos ejemplos que te enlazo antes te servirán de inspiración.

Yo para este post y sus pretensiones opto por algo sencillo y poco elaborado. Parto de unos estilos iniciales (al cargar la página) como los siguientes:

header { top:0; opacity: 1; transition: 1s top, 1s opacity; transition-timing-function: cubic-bezier(.7,0,.3,1); transform-origin: bottom center; } article { margin-top: 100vh; opacity: .3; transition: margin-top 1s, opacity 1s; transition-timing-function: cubic-bezier(.7,0,.3,1) }

Nota que sólo he puesto en el código anterior las declaraciones que cambiarán en ambos elementos al pulsar la etiqueta del input. Etiqueta que colocamos allá donde nos interese. Aunque ello signifique que estén separados el input y su label.

Al pasar el input al estado de checked el navegador aplica las reglas oportunas para que las declaraciones anteriores cambien:

#splash:checked ~ header { top: -100vh; opacity: 0; } #splash:checked ~ article { margin-top: 0; opacity: 1; height: 100vh;; }

El resultado de poner todo junto a trabajar:

See the Pen Splash up the page Pure Css by Kseso (@Kseso) on CodePen.

Ver la demo a full

avatar del Editor del blog

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