https://humano.io/wp-content/themes/humano/blocks/tres-pilares/view.js?ver=0.1.0

1/* Humano — Tres pilares: leve parallax/flotación de las capas al hacer scroll. */
2( function () {
3	'use strict';
4
5	if ( window.matchMedia && window.matchMedia( '(prefers-reduced-motion: reduce)' ).matches ) {
6		return;
7	}
8
9	var nodes = Array.prototype.slice.call(
10		document.querySelectorAll( '.humano-pilares__media--render[data-humano-float]' )
11	);
12	if ( ! nodes.length ) {
13		return;
14	}
15
16	var visible = [];
17	var ticking = false;
18
19	function update() {
20		ticking = false;
21		var mid = window.innerHeight / 2;
22		for ( var i = 0; i < visible.length; i++ ) {
23			var node = visible[ i ];
24			var rect = node.getBoundingClientRect();
25			var center = rect.top + rect.height / 2;
26			// Parallax sutil de las capas, acotado.
27			var offset = Math.max( -34, Math.min( 34, ( mid - center ) * 0.08 ) );
28			node.style.setProperty( '--py', offset.toFixed( 1 ) + 'px' );
29		}
30	}
31
32	function onScroll() {
33		if ( ! ticking && visible.length ) {
34			ticking = true;
35			window.requestAnimationFrame( update );
36		}
37	}
38
39	var io = new IntersectionObserver( function ( entries ) {
40		entries.forEach( function ( e ) {
41			var idx = visible.indexOf( e.target );
42			if ( e.isIntersecting && idx === -1 ) {
43				visible.push( e.target );
44			} else if ( ! e.isIntersecting && idx !== -1 ) {
45				visible.splice( idx, 1 );
46				e.target.style.setProperty( '--py', '0px' );
47			}
48		} );
49		onScroll();
50	}, { rootMargin: '10% 0px' } );
51
52	nodes.forEach( function ( n ) { io.observe( n ); } );
53	window.addEventListener( 'scroll', onScroll, { passive: true } );
54	window.addEventListener( 'resize', onScroll, { passive: true } );

55	update();
56}() );