Easy Parallaxe with jQuery
Créez un effet parallaxe simplement et de façon light
Si vous ne connaissait pas l’effet parallaxe je vous invite à visiter l’un des exemples les plus connus et mon préféré avec une réalisation pour Oakley . Bon pour réaliser cet exemple il vous faudra un plus que la technique qui suit et utiliser l’un des modules parallaxe existant : https://github.com/Prinzhorn/skrollr ou bien https://github.com/stephband/jparallax .
La technique ci-dessous permet de faire défiler une image moins vite que la page ce qui permet de rendre la page un peu moin static. C’est l’un des effets parallaxe…et cela en quelques lignes seulement de javascript.
//la fonction
function updateBackground($el, speed) {
var diff = $(window).scrollTop() - $el.offset().top;
var yPos = -(diff * speed);
var coords = '50% ' + yPos + 'px';
$el.css({
backgroundPosition: coords
});
}
//initialisation
var $el = $('header'); //selector
$(window).scroll(function () {
updateBackground($el, 0.3);
});
updateBackground($el, 0.3);
Coté HTML / CSS il suffit juste de définir un background-image sur votre block HTML (dans mon exemple <header>) .
Et voilà vous avez un effet parallaxe sympa avec peu d’effort pour le mettre en place et du poid an moins à charger pas vos visiteurs.
header {
position: relative;
width: 100%;
height: 350px;
background-image: url(../images/banner.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: 0 100%;
}
Et voilà vous avez un effet parallaxe sympa avec peu d’effort pour le mettre en place. Et surtout un peu de poids en moins à charger pas vos futurs visiteurs.
Une fonction avec un peu de jQuery qui est bien faite et bien utile (quand je vois des plugins de 20kB qui font pareil…) : http://codepen.io/JTParrett/pen/BkDie
