Creer une header image parallaxe dans wordpress

Suite à la consultation d’un tuto très utile pour savoir comment obtenir un header parallaxe sur tous les articles ou pages du site,
J’ai répliqué le code pour l’adapter à notre image d’en-tète.

Cette fonction n’est pas présente sur tous les sites, je fais donc allusion aux thèmes codés from scratch, ou aux nombreux thèmes par défaut de wordpress, qui contiennent la possibilité de mettre une image d’en-tête sur tout le site.
On va jouer sur le css pour rendre cette image parallaxe:

On va d’abord créer une div englobante autour de notre image d’en tête:

  <?php if (get_header_image()) : ?>
                                       <a href="<?php echo esc_url(home_url('/')); ?>"> <div id='parallax-banner'><img src="<?php header_image(); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></div></a>
<?php endif; ?>

J’entoure mon image d’une <div id=’parallax-banner’>.
Ensuite, voici un exemple de css à appliquer :

#parallax-banner {
	position: relative;
	overflow: hidden;
}
#parallax-banner img {
	position: absolute;                
	}
#parallax-banner .title {
	position: absolute;
	padding: 5px 0;
	top: 0;
	left: 0;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
	background-color: transparent;
	background-color: rgba(255, 255, 255, 0.8);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ccffffff,endColorstr=#ccffffff); /* Math.floor(0.8 * 255).toString(16); */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ccffffff,endColorstr=#ccffffff)";

	-moz-box-shadow: 0 0 4px #000;
	-webkit-box-shadow: 0 0 4px #000;
	box-shadow: 0 0 4px #000;
}

Vous pouvez bien sûr jouer sur les différents attributs pour obtenir l’effet escompté.
L’effet est fonctionnel bien qu’il ne soit pas des plus propres. Comme on le voit au scroll, l’image à tendance à gagner de l’espace.
Pour finir, voici la partie jquery : on joue sur les hauteurs des éléments pour calculer le mouvement de l’image. D’où le décalage minime de l’image au scroll.

function parallax_image(max, $image) {
	var imgTop = 0, scrollPos = jQuery(this).scrollTop();
		
	//rule of thirds to find the new top position for image
	imgTop = (scrollPos / max) * (2/3) * $image.height();
	
	$image.css({
		"top": -(imgTop)+"px"
	});
}
jQuery(window).load(function(){
	var $banner = jQuery("#parallax-banner"), $image = $banner.find("img"), height = 0, max = 0;
	
	//let's find the best height for it
	height = $banner.find("img").height() / 2;
	$banner.height(height);
		
	//this is the maxiumum amount of scroll for still visible banner, cached to improve performance
	max = ($banner.offset()).top + height;
	
	//let's position our title in the middle of the Area
	$banner.find(".title").css({
		"top": ((height - $banner.find(".title").height()) / 2) + "px"
	});
	
	jQuery(window).scroll(function() {	      
	   parallax_image(max, $image);	      
	});
});

N’hésitez pas à commenter et dire comment vous faites pour obtenir une header image parallaxe!!

27/01/2015 Mis à jour le 19/12/2019 Par Copier coller | Dans wordpress