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.

Elementor en ver­sion Pro per­met l’ef­fet paral­laxe sur des images d’ar­rière plan. Mais avec la ver­sion gra­tuite, ce n’est hélas pas possible.

Doit-on pour autant tirer un trait sur cet effet, ou pas­ser en ver­sion Pro ? N’y aurait-il pas une exten­sion dans le dépôt WordPress pour pal­lier cette lacune ?

À ma connais­sance, non. Il y a bien deux exten­sions, qui per­mettent d’a­jou­ter un effet de paral­laxe sur un élé­ment, mais pas sur l’ar­rière-plan d’une section.

Mais tout n’est pas per­du. J’ai trou­vé des tuto­riels sur le web pour pou­voir (enfin !) uti­li­ser cet effet avec Elementor sans pour autant pas­ser à la ver­sion Pro.

Le code

En tout pre­mier lieu, ins­tal­lez et acti­vez l’ex­ten­sion Code Snippets.

Code Snippets

Auteur(s) : Code Snippets Pro

Version actuelle : 3.6.5.1

Dernière mise à jour : 13 sep­tembre 2024

code-snippets.3.6.5.1.zip

94%Évaluations 1 000 000+Installations WP 5.0+Nécessaire

Créez un nou­vel extrait de code, nom­mez-le à votre conve­nance, d’un nom assez expli­cite tout de même — que diriez-vous de Elementor Parallax ?

Ensuite copiez-col­lez le code sui­vant dans l’éditeur :

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');
}

Choisissez l’op­tion Ne fonc­tionne que sur le site en ligne. Enregistrez et activez.

Pour finir, dans l’ou­til de confi­gu­ra­tion de WordPress, rajou­tez la règle CSS sui­vante (dans l’on­glet CSS additionnel) :

.parallax {
    transition: none !important;
}

Voila, vous avez l’ef­fet paral­laxe dis­po­nible pour vos images d’ar­rière plan.

La gestion de la parallaxe dans Elementor

Dans la sec­tion à laquelle vous sou­hai­tez affec­ter un effet paral­laxe, allez dans l’on­glet Style (1).

IL va sans dire qu’a­vec une image, c’est quand même mieux, alors sélec­tion­nez l’i­mage que vous vou­lez mettre en arrière plan.

Choisissez Fichier joint > Fixe, et Taille > Couvrir.

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

Dans le champ Classes CSS ins­cri­vez parallax.

Et voi­la, c’est ter­mi­né ! Vous avez un effet paral­laxe, certes basique, mais qui fonctionne.

À noter que cet effet ne fonc­tionne que sur les sections.

Vous pou­vez par contre l’u­ti­li­ser sur plu­sieurs sec­tions d’une même page.

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