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 a été mis à jour le 7 août 2022 ; il prend 3 minutes à lire et comporte 609 mots.

Elementor en version Pro permet l’ef­fet paral­laxe sur des images d’ar­rière plan. Mais avec la version gratuite, ce n’est hélas pas possible.

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

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

Mais tout n’est pas perdu. J’ai trouvé des tuto­riels sur le web pour pouvoir (enfin !) utili­ser cet effet avec Elementor sans pour autant passer à la version Pro.

Le code

En tout premier lieu, instal­lez et acti­vez l’ex­ten­sion Code Snippets.

Code Snippets

Auteur(s) : Code Snippets Pro

Version actuelle : 3.6.6.1

Dernière mise à jour : 28 novembre 2024

code-snippets.3.6.6.1.zip

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

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

Ensuite copiez-collez le code suivant 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 suivante (dans l’on­glet CSS additionnel) :

.parallax {
    transition: none !important;
}

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

La gestion de la parallaxe dans Elementor

Dans la section à laquelle vous souhai­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’image que vous voulez mettre en arrière plan.

Choisissez Fichier joint > Fixe, et Taille > Couvrir.

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

Dans le champ Classes CSS inscri­vez parallax.

Et voila, c’est terminé ! Vous avez un effet paral­laxe, certes basique, mais qui fonctionne.

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

Vous pouvez par contre l’uti­li­ser sur plusieurs sections 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 commen­taires ! Si vous avez des ques­tions, ou si vous avez appré­cié c’est égale­ment dans les commen­taires que ça se passe, d’ailleurs 😉