Un effet parallaxe avec Elementor

L'effet parallaxe est réservé à Elementor Pro, ou à des extensions payantes. Pour la version gratuite, il y a un bout de code…

Cet article prend 3 minutes à lire et comporte 609 mots.

Ele­men­tor en ver­sion Pro per­met l’ef­fet par­al­laxe sur des images d’ar­rière plan. Mais avec la ver­sion gra­tu­ite, ce n’est hélas pas pos­si­ble.

Doit-on pour autant tir­er un trait sur cet effet, ou pass­er en ver­sion Pro ? N’y aurait-il pas une exten­sion dans le dépôt Word­Press pour pal­li­er cette lacune ?

À ma con­nais­sance, non. Il y a bien deux exten­sions, qui per­me­t­tent d’a­jouter un effet de par­al­laxe sur un élé­ment, mais pas sur l’ar­rière-plan d’une sec­tion.

Mais tout n’est pas per­du. J’ai trou­vé des tuto­riels sur le web pour pou­voir (enfin !) utilis­er cet effet avec Ele­men­tor sans pour autant pass­er à la ver­sion Pro.

Le code

En tout pre­mier lieu, installez et activez l’ex­ten­sion Code Snip­pets.

Créez un nou­v­el extrait de code, nom­mez-le à votre con­ve­nance, d’un nom assez explicite tout de même — que diriez-vous de Ele­men­tor Par­al­lax ?

Ensuite copiez-collez le code suiv­ant dans l’édi­teur :

function jquery_parallax() {
   ?>
    <script language="JavaScript" type="text/javascript">
;(function($) {
   'use strict'
    var testMobile;
    var isMobile = {
        Android: function() {
            return navigator.userAgent.match(/Android/i);
        },
        BlackBerry: function() {
            return navigator.userAgent.match(/BlackBerry/i);
        },
        iOS: function() {
            return navigator.userAgent.match(/iPhone|iPad|iPod/i);
        },
        Opera: function() {
            return navigator.userAgent.match(/Opera Mini/i);
        },
        Windows: function() {
            return navigator.userAgent.match(/IEMobile/i);
        },
        any: function() {
            return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
        }
    };
	var parallax = function() {
		testMobile = isMobile.any();
		if (testMobile == null) {
			$(".parallax").parallax("50%", 0.3);
		}
	};
	// Dom Ready
	$(function() {
		parallax();
   	});
})(jQuery);
/*
jQuery Parallax 1.1.3
Author: Ian Lunn
Plugin URL: http://www.ianlunn.co.uk/plugins/jquery-parallax/
Dual licensed under the MIT and GPL licenses:
http://www.opensource.org/licenses/mit-license.php
http://www.gnu.org/licenses/gpl.html
*/
!function(n){var t=n(window),e=t.height();t.resize(function(){e=t.height()}),n.fn.parallax=function(o,r,i){function u(){var i=t.scrollTop();l.each(function(t,u){var l=n(u),f=l.offset().top,s=a(l);i>f+s||f>i+e||l.css("backgroundPosition",o+" "+Math.round((l.data("firstTop")-i)*r)+"px")})}var a,l=n(this);l.each(function(t,e){$element=n(e),$element.data("firstTop",$element.offset().top)}),a=i?function(n){return n.outerHeight(!0)}:function(n){return n.height()},(arguments.length<1||null===o)&&(o="50%"),(arguments.length<2||null===r)&&(r=.1),(arguments.length<3||null===i)&&(i=!0),t.bind("scroll",u).resize(u),u()}}(jQuery);
    </script>
    <?php
}
if (!(is_admin())) {
wp_enqueue_script('jquery');
add_action('wp_head', 'jquery_parallax');
}

Choi­sis­sez l’op­tion Ne fonc­tionne que sur le site en ligne. Enreg­istrez et activez.

Pour finir, dans l’outil de con­fig­u­ra­tion de Word­Press, rajoutez la règle CSS suiv­ante (dans l’on­glet CSS addi­tion­nel) :

.parallax {
    transition: none !important;
}

Voila, vous avez l’ef­fet par­al­laxe disponible pour vos images d’ar­rière plan.

La gestion de la parallaxe dans Elementor

Dans la sec­tion à laque­lle vous souhaitez affecter un effet par­al­laxe, allez dans l’on­glet Style (1).

IL va sans dire qu’avec une image, c’est quand même mieux, alors sélec­tion­nez l’im­age que vous voulez met­tre en arrière plan.

Choi­sis­sez Fichi­er joint > Fixe, et Taille > Cou­vrir.

Passez ensuite à l’on­glet Avancé (2).

Dans le champ Class­es CSS inscrivez parallax.

Et voila, c’est ter­miné ! Vous avez un effet par­al­laxe, certes basique, mais qui fonc­tionne.

À not­er que cet effet ne fonc­tionne que sur les sec­tions.

Vous pou­vez par con­tre l’u­tilis­er sur plusieurs sec­tions d’une même page.

Si vous avez des amélio­ra­tions à apporter à ce bout de code, n’hésitez pas à m’en faire part via les com­men­taires ! Si vous avez des ques­tions, ou si vous avez appré­cié c’est égale­ment dans les com­men­taires que ça se passe, d’ailleurs 😉