Le module slider (élégamment traduit par Diapo…) de Divi embarque de nombreuses options de personnalisation afin de modifier son apparence.
Néanmoins, certaines fonctionnalités sont manquantes, notamment pour afficher le slider en plein écran, ou changer le style des diverses transitions.
Ayant solutionné le premier manque dans un précédent tutoriel, je vais donc m’attaquer ici au second et vous expliquer comment remplacer les différentes animations qui sont utilisées par défaut.

Avant-propos

Les modifications seront à apporter en CSS. 
Si vous ne savez pas où ajouter les lignes de CSS citées dans ce tuto, je vous invite à lire mon article 7 manières d’ajouter des CSS à Divi.

Vous trouverez ci-dessous la liste des animations disponibles.
En effet, Divi intègre déjà les règles CSS nécessaires pour réaliser un certain nombre d’animations. C’est ce même code qui sert lorsque l’on choisit d’animer une section, une ligne ou un module avec le Divi Builder.

fadeTop
fadeRight
fadeBottom
fadeLeft
fadeIn
fadeInTop
fadeInRight
fadeInBottom
fadeInLeft
fadeOutTop
fadeOutRight
fadeOutBottom
fadeOutLeft
flipInX
flipInY
gridFadeIn
Grow
slideWidth

Les règles CSS définissant l’animation d’éléments doivent être préfixées pour être compatibles avec les différents types de navigateurs.
Pour des raisons de lisibilité, les lignes de CSS que je propose dans cet article n’incluent pas ces préfixes.
Je vous invite donc à les ajouter en utilisant un site tel que Autoprefixer.

Je vous conseille de préciser “last 100 versions” dans le champ filter, de manière à optimiser au maximum la rétro-compatibilité.

Modifier les transitions de chaque slide

Il suffit d’utiliser la classe ciblant le slide actif et de lui attribuer :

• un nom d’animation en piochant dans la liste que je vous ai donnée en avant-propos (sans oublier de préfixer)
• une durée d’animation en secondes (sans oublier de préfixer)

.et-pb-active-slide {
	animation-name: flipInY;
    animation-duration: .7s;
}

Modifier l’animation du contenu des slides

Si vous ajoutez du contenu à vos slides (titre, description, bouton), ces éléments apparaissent également par défaut en fondu (respectivement fondu de gauche et fondu du bas).
Vous pouvez changer ces effets avec les règles CSS suivantes.
Ici, pas besoin de préciser une durée d’animation (sauf si vous souhaitez modifier celle par défaut).

Changer l’animation de la description

Pour modifier les transitions sur le texte de description ainsi que le bouton, utilisez le sélecteur CSS ci-dessous.

.et-pb-active-slide .et_pb_slide_description {
	animation-name: fadeBottom;
}

Changer l’animation de l’image ou la vidéo

Pour modifier les transitions sur l’image ou la vidéo qui sont ajoutés en contenu du slide, utilisez les sélecteurs CSS ci-dessous.

.et-pb-active-slide .et_pb_slide_image, .et-pb-active-slide .et_pb_slide_video {
	animation-name: fadeLeft;
}

Utiliser d’autres effets de transition

Si les animations CSS déjà présentes dans Divi ne vous suffisent pas, vous pouvez en ajouter d’autres.
Alors je vous rassure tout de suite, pas la peine de les coder vous-même, il existe des librairies CSS toutes faites, telles que Animate.css (dont Divi embarque quelques effets), Vivify, Hover.css, Motion.css… voire même, pour aller plus loin, des générateurs d’animations CSS comme Bounce.js ou encore le très complet Animista.

Exemple avec Animate.css

Rendez-vous sur le site d’Animate.css et testez les différentes animations qui sont proposées afin de faire votre choix.
Dans mon exemple, j’ai choisi l’effet rollIn pour animer l’arrivée des logos.

Cliquez ensuite sur Download Animate.css pour afficher le fichier CSS contenant toutes les règles permettant de réaliser les animations proposées par Animate.css.

Pour utiliser une seule animation

Naviguez jusqu’à la partie du fichier qui vous intéresse (le plus simple étant de faire une recherche dans la page avec la fonction dédiée de votre navigateur).

Ensuite, copiez les lignes de CSS correspondant à l’effet souhaité.
Par exemple, pour l’effet rollIn :

@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

Collez ensuite ces lignes dans les CSS perso de votre site (dans les options du thème, les options de la page ou dans le fichier style.css votre thème enfant).

Vous pouvez maintenant utiliser le nom d’animation rollIn en plus de la liste des animations que je vous ai donnée en début d’article.

Pour utiliser toutes les animations d’Animate.css

Téléchargez le fichier animate.css, uploadez-le sur votre serveur FTP, puis copiez son URL.
Complétez la ligne de code suivante avec cette URL :

<link rel="stylesheet" href="IciVotreURL" />

• Si vous voulez utiliser Animate.css sur plusieurs pages de votre site, insérez la ligne de code ci-dessus dans options du thème Divi -> Intégration -> Ajouter du code dans le < head > de votre blog
• Si vous ne voulez utiliser Animate.css que sur une seule page de votre site, alors pas la peine de charger le fichier CSS sur toutes les pages avec la méthode précédente.
  Il vous suffit d’ajouter sur la page adéquate un module Code avec la ligne de code ci-dessus.

En conclusion

Modifier les transitions des sliders de Divi permet d’apporter un peu d’originalité à vos sites afin qu’ils ne ressemblent pas tous à un site Divi standard.
En fouillant un peu dans les sites proposant des animations que je vous ai listés, vous trouverez très certainement votre bonheur pour réaliser des sliders bien dynamiques !
Mais attention tout de même aux abus, il ne faudrait pas que la lisibilité en pâtisse… 😉

Partager