jQuery: implementare un effetto parallax sugli elementi e non sugli sfondi

jQuery: implementare un effetto parallax sugli elementi e non sugli sfondi

Se vogliamo implementare un effetto parallax sugli elementi e non sugli sfondi jQuery può essere la soluzione.

Supponiamo di avere questa struttura ripetuta:


<section class="content">
	<header class="content-header">...</header>
	<!-- contenuto -->
</section>

Con questi stili CSS:


.content-header {
	position: fixed;
	background: #fff;
	z-index: 10000;
}

Possiamo implementare il seguente codice jQuery:


$(function() {
	$( ".content-header" ).each(function() {
		var $header = $( this ),
			$parent = $header.parent(),
			parentTop = $parent.offset().top,
			parentLeft = $parent.offset().left;
			
			$header.css({
				top: parentTop,
				left: parentLeft
			});
		
	});
	
});

Torna su