Nativement, le Divi Builder permet de donner un effet de parallaxe aux images de fond des sections, lignes et modules.
C’est assez intéressant car ça permet de dynamiser un peu le rendu de son site, mais il faut savoir qu’il est possible d’aller encore plus loin avec l’effet de parallaxe.
Voyons donc comment appliquer un effet de parallaxe à n’importe quel élément de votre site Divi comme dans la démo que j’ai réalisée.

Avant de commencer, veuillez noter que ce tutoriel nécessite l’utilisation d’un thème enfant, et ce afin de charger les fichiers JavaScript nécessaires de la manière la plus adéquate possible.

Si vous n’avez pas de thème enfant, vous pouvez télécharger gratuitement le thème enfant de Divi Community.

Et si vous voulez en savoir plus sur les thèmes enfants, je vous invite à lire notre article Tout savoir sur les thèmes enfants pour Divi.

Mais en fait, c’est quoi le parallaxe ?

Avant de rentrer dans le vif du sujet, je vais rapidement rappeler en quoi consiste l’effet de parallaxe.
Le principe consiste à déplacer des éléments du site sur des plans différents (via la propriété CSS z-index) et à des vitesses différentes (via la propriété CSS translate).
L’effet de parallaxe peut se déclencher au défilement de la page (c’est ce que nous verrons dans ce tutoriel) ou au mouvement du pointeur de la souris (ceci fera certainement l’objet d’un prochain article).

L’effet parallaxe de Divi

Comme vous le savez certainement si vous êtes un utilisateur de Divi, le Divi Builder offre nativement la possibilité d’appliquer un effet de parallaxe aux images de fond.

Il propose 2 options :

• la méthode “parallaxe réel” qui utilise JavaScript pour appliquer à l’image de fond une règle CSS utilisant la propriété translate et dont la valeur est modifiée en fonction du défilement de la page
• la méthode “CSS” qui :
  • dimensionne l’image de fond de manière à ce qu’elle occupe l’intégralité de la fenêtre active
  • dispose l’image de fond en position fixe

Allez plus loin avec le parallaxe dans Divi

Pour vous aider dans notre démarche et vous éviter d’avoir à réinventer la roue, je vous propose d’utiliser un plugin jQuery.

J’en profite pour préciser qu’il ne faut pas confondre plugin jQuery et plugin WordPress.

Certes, un plugin a pour vocation d’étendre les fonctionnalités de son outil parent, mais dans le cas des plugins jQuery, pas de crainte à avoir concernant la surcharge de votre site car ceux-ci ne sont composés généralement que d’un seul fichier JavaScript (parfois ils sont accompagnés d’un fichier CSS) et ils ne pèsent que quelques kilo-octets.

Il existe donc de nombreux plugins jQuery dédiés au parallaxe, plus ou moins complexes et plus ou moins maintenus.

Après de nombreux tests, mon choix s’est porté sur Paroller.js car :

• il est très simple d’utilisation
• il a des fonctionnalités intéressantes (que je vous détaille plus bas dans cet article)
• il a été mis à jour assez récemment

Installez Paroller.js

Un plugin jQuery ne s’installe pas de la même manière qu’un plugin WordPress, il faut mettre un peu plus la main à la pâte… mais rien d’insurmontable !

Téléchargez Paroller.js

Commencez par télécharger la dernière version du plugin Paroller.js depuis son dépôt Github en cliquant simplement sur le bouton ci-dessous.

Ajoutez Paroller.js à votre thème enfant

Dans l’archive paroller.js-master.zip que vous venez de télécharger, localisez dans le dossier dist le fichier jquery.paroller.min.js.

Connectez-vous au serveur FTP de votre site et rendez-vous dans le répertoire de votre thème enfant.
Pour une question d’organisation, je vous suggère d’y créer un sous-dossier paroller, dans lequel vous allez uploader le fichier jquery.paroller.min.js.

Ajoutez également dans ce sous-dossier un fichier JavaScript vierge que vous nommerez config-paroller.js et qui vous servira plus tard à écrire la configuration des éléments qui bénéficieront de l’effet parallaxe.

Pour résumer, ci-dessous l’arborescence en image.

Déclarez vos fichiers JavaScript

Il faut maintenant appeler sur la ou les pages de votre site le plugin Paroller.js ainsi que votre fichier de configuration.

Pour ce faire, ouvrez le fichier functions.php de votre thème enfant et ajoutez les lignes suivantes, que vous pourrez modifier selon vos besoins en fonction des informations que je vais vous donner.

function loadParollerJS() {
  if ( is_page( 'effets-parallax-avances' )) {
      wp_enqueue_script( 'paroller-js', get_stylesheet_directory_uri() . '/paroller/jquery.paroller.min.js', array( 'jquery' ), null, false );
      wp_enqueue_script( 'paroller-js-config', get_stylesheet_directory_uri() . '/paroller/config-paroller.js', array( 'jquery' ), null, false );
  }
}
add_action( 'get_footer', 'loadParollerJS' );

Détaillons ce code :

• Ligne 2 : j’ai mis une condition pour ne charger le plugin et son fichier de config que sur la page de mon choix.
  • Si vous pensez utiliser des effets de parallaxe sur la majorité des pages de votre site, supprimez les lignes 2 et 5.
  • Si vous voulez charger le plugin sur plusieurs pages bien précises, il vous suffit de préciser leur nom (le slug) entre guillemets et séparés par des virgules : ‘page-machin’, ‘page-bidule’. Vous pouvez aussi utiliser leurs IDs : ’42’, ’25’
• Ligne 3 : le chemin d’accès au fichier de paroller.js
  
• Ligne 4 : le chemin d’accès à notre fichier JavaScript de configuration de paroller.js
• Ligne 7 : comme préconisé par le concepteur du plugin, on charge ces fichiers le plus près possible de la balise fermante </body>. Pour cela, on utilise le hook WordPress get_footer au lieu de wp_enqueue_scripts qui, lui, charge les fichiers dans le <head> de la page.

Balisez les éléments qui recevront l’effet parallaxe

Rendez-vous maintenant sur la page sur laquelle vous souhaitez ajouter des éléments avec un effet parallaxe, activez le Divi Builder et attribuez à chacun un identifiant CSS unique.
Pour rappel, pour cela il faut afficher les paramètres d’une section, d’une ligne ou d’un module et aller dans Avancé -> ID et Classes CSS -> ID CSS.

Pour gérer les effets de superposition des divers plans, il vous suffit d’ajouter la règle CSS z-index: 10; en remplaçant le chiffre 10 par la valeur de votre choix (positive ou négatif, selon la position souhaitée).

Configurez vos effets de parallaxe

Nous rentrons enfin dans le vif du sujet : la configuration de l’effet. C’est maintenant que le parallaxe va prendre vie !

Un exemple de configuration basique

Ouvrez votre fichier de configuration config-paroller.js et collez les lignes ci-dessous.
Prenez soin de remplacer #votre-element par l’ID CSS de l’un des éléments que vous avez précédemment balisés.

jQuery("#votre-element").paroller({  
	 factor: 0.3,
	 type: 'foreground',
	 direction: 'vertical'  
});  

Si vous n’avez pas fait d’erreur lors des étapes précédentes, l’item ciblé doit réagir différemment des autres éléments lors du défilement de la page.

Un exemple avec 2 éléments

Vous n’aurez évidemment pratiquement jamais qu’un seul élément qui se verra attribué un effet de parallaxe. Pour en ajouter d’autres, il suffit donc de dupliquer le groupe de lignes cité plus haut, en précisant l’ID adéquat et en changeant les options de configuration.

jQuery("#votre-element-1").paroller({  
	 factor: 0.3,
	 type: 'foreground',
	 direction: 'vertical'  
});  

jQuery("#votre-element-2").paroller({  
	 factor: 0.5,
	 type: 'foreground',
	 direction: 'vertical'  
});  

Les options de configuration de Paroller.js

factor

Définit la vitesse et la distance parcourue par l’élément lors du défilement de la page.
Sa valeur peut être positive (0.3) ou négative (-0.3).
Moins signifie plus lent et la valeur 0 n’applique évidemment pas l’effet.
Les valeurs négatives font partir l’élément dans l’autre sens (vers le bas pour le parallaxe vertical ou vers la droite pour le parallaxe horizontal).

factorXs, factorSm, factorMd, factorLg, factorXl

Un des intérêts de ce plugin jQuery réside dans la précision de sa configuration selon la taille de l’écran ciblée.
Ainsi, il est possible de donner une valeur de parallaxe différente en fonction de la largeur de l’écran sur lequel le site est consulté.

Voici en détails les points de rupture correspondants à ces options :

• factorXs pour les écrans d’une largeur inférieure à 576 px
• factorSm pour les écrans d’une largeur inférieure ou égale à 768 px
• factorMd pour les écrans d’une largeur inférieure ou égale à 1024 px
• factorLg pour les écrans d’une largeur inférieure ou égale à 1200 px
• factorXl pour les écrans d’une largeur inférieure ou égale à 1920 px

type

2 valeurs possibles pour cette option :

• background : si l’élément auquel appliquer l’effet parallaxe est une image de fond
• foreground : pour tout autre élément qui n’est pas une image de fond

direction

Ici aussi, 2 valeurs sont possibles :

• vertical : l’effet parallaxe est appliqué sur un axe vertical
• horizontal : un peu plus original, l’effet parallaxe est appliqué sur un axe horizontal

Un exemple de configuration incluant toutes les options de Paroller.js

jQuery("#votre-element").paroller({  
	 factor: 0.3,
	 factorXs: 0.1,
	 factorSm: 0.2,
	 factorMd: 0.3,
	 factorLg: 0.4,
	 factorXl: 0.5,
	 type: 'foreground',
	 direction: 'horizontal'
});  

Pour conclure

Voila, je pense que vous êtes d’accord avec moi, ce plugin jQuery est relativement aisé à implémenter et à prendre en main.
Ses options de configuration sont bien fournies et permettent d’obtenir des effets de parallaxe très sympas pour réellement dynamiser son site Divi.

Pour profiter pleinement de l’effet parallaxe, je vous conseille, comme je l’ai fait dans ma démo, de jouer sur la taille des éléments, les flous, les transparences et les ombres afin d’accentuer l’effet de profondeur.

Partager