Columnas con scroll reverso

Este es uno de los ejemplos que mostré durante la presentación que hice en la WordCamp Logroño 2025.

El resultado final

El código

add_action( 'init', 'cg_reverse_scroll_style' );
function cg_reverse_scroll_style() {
	register_block_style( 'core/columns', array(
		'name'         => 'osom-reverse-scroll',
		'label'        => __( 'Reverse Scroll', 'osom-block-styles' ),
		'inline_style' => ' @media (prefers-reduced-motion: no-preference) {
		.wp-block-columns.is-style-osom-reverse-scroll {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			overflow-y: hidden;
			min-height: 100vh;
			gap: var(--wp--style--block-gap);
		}

		@supports (animation-timeline: scroll()) {
			.wp-block-columns.is-style-osom-reverse-scroll .wp-block-column {
				display: flex;
				flex-direction: column;
				gap: var(--wp--style--block-gap);
			}

			.wp-block-columns.is-style-osom-reverse-scroll .wp-block-column.column-reverse {
				transform: translateY(calc(-100% + 100vh));
				flex-direction: column-reverse;
				animation: adjust-position linear forwards;
				animation-timeline: scroll(root block);
			}

			@keyframes adjust-position {
				from {
					transform: translateY(calc(-100% + 100vh));
				}
				to {
					transform: translateY(calc(100% - 100vh));
				}
			}

			.wp-block-columns.is-style-osom-reverse-scroll .wp-block-image {
				margin: 0;
				height: auto;
				flex: 1;
			}

			.wp-block-columns.is-style-osom-reverse-scroll .wp-block-image img {
				height: 100%;
				width: 100%;
				object-fit: cover;
			}
		}
		}',
	) );
}