Ajouter des effets de transitions sur les contenus avec un Slider

slider-image

Le fait

Aujourd'hui, toute page d'accueil d'un site qui se respecte contient un slider (ou carrousel) qui montre des produits phares, des actualités mises en avant ou simplement des activités maitrisés, selon sa vocation (e-commerce, blog, corporate ….). En plus, les contenus des slides s'affichent progressivement avec des effets de transitions qui nous éblouissent parfois. Nous pouvons obtenir ce résultat en utilisant un plugin. Un des plus populaires est par exemple Slider revolution : très complet, puissant et existe en plugin WordPress, mais payant.

Dans notre article, nous allons vous montrer comment nous pouvons obtenir à peu près le même résultat en utilisant des composants gratuits disponibles sur la toile.

...suggère l 'idée,

En premier lieu, comme il s'agit d'un slider, nous allons utiliser le célèbre Owl Carousel. Nous avons déjà écrit un article d'introduction sur ce plugin ici : Le meilleur plugin pour slider ?

Ensuite, pour les effets de transitions, nous nous tournerons vers animates.css, une librairie contenant différents styles de transitions prêt à l'emploi écrits en CSS3.

L'idée dirige l'expérience

Commençons d'abord par la partie HTML.

1 - Il faut d'abord lier aux feuilles de styles nécessaires :

<link href="css/animate.min.css" rel="stylesheet"> 
<link href="css/owl.carousel.min.css" rel="stylesheet"> 
<link href="css/owl.theme.default.min.css" rel="stylesheet"> 

2 - Inclure les scripts indispensables :

<script src="javascript/jquery.min.js"></script> 
<script src="javascript/owl.carousel.min.js"></script> 

3 - Construire le slider :

<div class="owl-carousel owl-theme"> 
<div class="item"> 
        <h4 data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown">Slider 1</h4> 
        <p data-animation-in="rollIn" data-animation-out="animate-out rollOut">Cras a elementum dolor. Praesent aliquam sapien ac eros semper ullamcorper. Sed imperdiet enim at sodales suscipit. Aenean eget faucibus ipsum.</p> 
        <p><a href="#" class="btn" data-animation-in="fadeInLeft" data-animation-out="animate-out fadeOutRight">Button 1</a></p> 
</div> 
… 
</div> 

Nous remarquons que chaque élément du slide contient un attribut data-animation-in et/ou data-animation-out. Ils servent à stocker la valeur du type d'animation à faire selon l'état du slide (entrant / sortant). 

Pour la partie CSS, voici ce qu'il faut retenir : il faut définir le délai et la durée des animations.

.animated  { 
  -webkit-animation-duration : 3s  ; 
  animation-duration : 3s  ; 
 
 
  -webkit-animation-delay : 500ms  ; 
  animation-delay : 500ms  ; 
} 
 
.animate-out { 
  -webkit-animation-delay : 100ms  ; 
  animation-delay : 100ms  ; 
}

Sur ce point, en entrant, il faut que le délai soit supérieur ou égal à la durée de transition de chaque slide. En sortant, c'est l'inverse, c’est-à-dire, le plutôt possible. 

Passons à la partie javascript, qui est la plus importante : 

1 – Initialiser le plugin Owl carousel :

// Declare Carousel jquery object 
  var owl = $('.owl-carousel'); 
 
 
  // Carousel initialization 
  owl.owlCarousel({ 
      loop:true, 
      margin:0, 
      navSpeed:500, 
      nav:true, 
      items:1 
  }); 

L'option navSpeed défini la durée de la transition entre les slides, que nous avons évoquée ultérieurement.

2 - Créer une fonction qui applique le type d'animation sur un élément : 

function setAnimation ( _elem, _InOut ) 

Elle possède 2 arguments : _elem qui défini l'élément cible et _InOut , qui indique à quel moment et où il faut exécuter l'animation ( en entrant ou en sortant ).

Dans cette fonction, il faut d'abord créer une chaîne de caractères contenant le nom des événements qui surviennent, selon les navigateurs, quand l'animation se termine.

var animationEndEvent = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; 

On extrait ensuite la valeur des attributs data-animation pour avoir le type d'animation.

var $animationType = 'animated ' + $elem.data( 'animation-' + _InOut ); 

On ajoute les classes nécessaires à l'animation voulue sur l'élément et on les supprime ensuite une fois l' animation terminée.

$elem.addClass($animationType).one(animationEndEvent, function () { 
        $elem.removeClass($animationType); // remove animate.css Classes at the end of the animation 
      }); 

3 Ajouter les événements qui déclenchent les animations :

Il en faut 2 : un qui enclenche les animations avant que le slide sorte de  l'état actif et un autre quand il entre dans ce même état. Heureusement, notre plugin owlcarousel possède ces 2 évènements 

owl.on('change.owl.carousel', function(event){
// ...
})

ET

owl.on('changed.owl.carousel', function(event){
// ...
})

Le 1er s'exécute avant le changement d'état du carrousel, c’est-à-dire avant le moment où un slide courant ne serait plus actif, tandis que le 2ème est exécuté après le changement, c’est-à-dire quand le slide suivant devient actif. 

L' expérience juge l'idée

Pour avoir une idée de ce que cela donne, je vous invite à voir la démo sur codepen : http://codepen.io/radimby/pen/YpEJQP

Il faut noter que ce système est améliorable. Vous pouvez par exemple spécifier la durée ou le délai des animations de chaque élément en y ajoutant un autre attribut data ( data-animation-delay par exemple ). Ainsi je vous recommande de 'forker' cet exemple pour expérimenter les différentes possibilités.

Enregistrer

Enregistrer

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *