Comment ajouter des transitions de diapositives à Slider Revolution

Cet article fait partie de notre série en cours de didacticiels Slider Revolution. Vous pouvez trouver tous les articles de cette série dans notre guide complet de la révolution des curseurs.

Slider Revolution permet beaucoup de créativité et de polyvalence en termes de style. Vous pouvez créer des curseurs minimalistes et atténués ou des curseurs occupés avec beaucoup de couches. Le deuxième type est généralement plus intéressant et dynamique. Mais si vous avez un curseur composé de très bonnes images mais pas de calques supplémentaires, vous pouvez toujours le faire apparaître. Et c’est précisément où interviennent les transitions de diapositives.

À propos des transitions de diapositives

Dans Slider Revolution (qui propose d’excellentes options dans ce département), les transitions de diapositives sont utilisées pour animer des diapositives composées d’images d’arrière-plan et de quelques (ou pas) calques supplémentaires. Une transition de diapositive est, en fait, l’effet qui apparaît lorsqu’une diapositive se déplace pour faire de la place à la suivante.

Ces transitions peuvent vous aider à définir le rythme et la sensation de vos curseurs, car elles peuvent être lentes et subtiles ou rapides et audacieuses.

Jetons un coup d’œil à la façon dont vous pouvez configurer les transitions de diapositives Slider Revolution.

Transition de la première diapositive

Slider Revolution nous donne la possibilité de choisir une transition distincte pour la première diapositive qui arrive et des transitions différentes pour les diapositives qui suivent. Cela permet de distinguer la première diapositive comme une sorte d’introduction. Si vous choisissez un mouvement de diapositive « de droite à gauche » pour vos images d’arrière-plan, votre première diapositive devrait avoir une direction de transition différente. Si vous laissez le même paramètre pour la première diapositive, vous aurez une page vierge avant que votre première image d’arrière-plan ne glisse sur le côté. Ainsi, pour la première transition de diapositive, il est toujours recommandé d’utiliser un simple Fondu en entrée animation. Pour définir cette option, accédez à Module Options générales > Général > Première diapositive et réglez le Diff anim à Au.

Dans cet exemple, nous avons utilisé la page d’accueil Passepartout Slider de notre thème WordPress Yvette, en laissant ses valeurs par défaut pour Type de transition, Durée de la transition et pour Montant de la fente de transition. Vous pouvez, bien sûr, les modifier pour les adapter au style de votre site Web. Ne définissez pas de valeurs trop élevées pour la durée de transition, afin d’éviter un long temps de chargement pour votre première image de diapositive.

Transition d’une seule diapositive

Après avoir pris soin de votre première diapositive, vous pouvez faire Animations à une seule diapositive pour chaque image d’arrière-plan de votre curseur. Celui que vous avez défini pour la première diapositive va apparaître la deuxième fois que la diapositive apparaît (au cas où, bien sûr, vous auriez choisi un autre type d’animation pour la première transition de diapositive).

Vous pouvez utiliser la même animation pour toutes les diapositives, ou vous pouvez définir un type différent pour chacune. Aller à Options de diapositive > Animation > Animation de diapositive et cliquez sur le gros bouton bleu pour ouvrir différentes animations de transition.

Différents types de transition sont disponibles et vous pouvez sélectionner votre type préféré et choisir l’animation dans la liste déroulante supplémentaire.

Nous avons décidé d’utiliser les mêmes animations pour toutes les diapositives, et c’est ce que nous avons utilisé. Pour le type, nous avons opté pour Glisser sur, et pour la façon dont il apparaît, nous avons choisi Glisser vers la gauche. Ses autres options par défaut semblaient bien convenir, nous les avons donc laissées telles quelles. Slide Over signifie que votre prochaine image glissera toujours sur la précédente, et dans notre cas, elle apparaîtra de droite à gauche.

Et voici les paramètres supplémentaires pour la transition. Vous pouvez modifier sa vitesse et ses assouplissements.

Après avoir tout configuré, voici à quoi ressemblent nos transitions :

Envelopper

Les transitions de diapositives représentent un élément important de chaque curseur, il est donc fortement recommandé de bien les réfléchir et de les configurer pour qu’elles s’adaptent au style et à l’atmosphère de votre site Web. Comme nous l’avons vu dans cet article, certaines pratiques doivent être respectées. Par exemple, votre première diapositive doit avoir un effet de transition différent de celui des autres et la durée de la transition ne doit pas être trop longue. Slider Revolution offre des tonnes d’options pour personnaliser cet effet, et nous vous recommandons de les expérimenter un peu jusqu’à ce que vous obteniez le résultat parfait.