Les slides en javascript sont très présent sur les sites web, ce n’est pas une nouvelle. Par contre le CSS3 nous permet de donner une allure différente à ces slides, comme par exemple avec les boutons « précédent » et « suivant ». C’est ce que nous allons voir dans ce tutorial. Avec la propriété « transform » nous allons animer ces boutons au survol de la souris. Dans un premier temps nous allons comprendre comment fonctionne l’effet de base, puis nous verrons comment l’intégrer à une slide javascript marchant avec jQuery.

Démo

Télécharger

I – Le principe de base

Tout va se passer dans la balise <a>. Dans cette dernière nous aurons un span et une div. Le span représentera le bouton à l’état normal, et la div s’affichera au rollover créant ainsi notre animation.
Voici la structure html, comme vous le voyez c’est très simple.

1
2
3
4
5
6

<div class="btn-prev">
	<a href="#" class="prev">
		<span>Précédent</span>
		<div class="prev-hover"></div>
	</a>
</div>

Il nous suffit ensuite de définir les styles CSS. Nous allons donc afficher la balise <span> en lui appliquant un background, par exemple. Pour notre div, ce sera un petit un peu différent. Nous allons également lui appliquer les styles nécessaire mais en indiquant une largeur et hauteur à 0 pixel. De ce fait l’élément ne sera pas visible à l’état normal, et lui appliquons sa vrai taille au rollver. Puis, grâce à la propriété CSS3 « transition », nous créerons l’effet souhaité.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

div.btn-prev a span {
	text-indent: -9999px;
	background: #000 url('images/prev-normal.png') no-repeat;
	width: 50px;
	height: 50px;
	display: block;
	position: absolute;
	margin: 26px 26px;
 
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	border-radius: 30px;
 
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
 
div.prev-hover {
	background: #fff url('images/prev-hover.png') no-repeat;
	width: 0px;
	height: 0px;
	position: absolute;
	margin: 50px 50px;
 
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
 
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
 
div.btn-prev a:hover div.prev-hover {
	width: 100px;
	height: 100px;
	margin: 0;
}

Si vous essayez, et que vous placez votre curseur juste sur le bord du bouton, l’effet « sautille », ce qui n’est pas agréable pour l’utilisateur. Pour remédier à ça, il faut juste indiquer une taille de base à l’élément <a>.

1
2
3
4
5

a {
	display: block;
	width: 80px;
	height: 80px;
}

II – Cas concret : Les boutons dans un slide

Pour commencer, nous allons télécharger un slider existant. Pour l’exemple j’ai choisis FlexSlider. Rendez-vous sur la page du slider ou cliquez directement ici pour le télécharger.

Avant de nous attaquer aux styles des boutons, nous allons modifier le script (un tout petit peu, vraiment pas de quoi paniquer !). Juste avant ça, ouvrez demo.html et changez l’appel du script à la 10ème ligne. On remplace « jquery.flexslider-min.js » par « jquery.flexslider.js ».

1

<script src="jquery.flexslider-min.js"></script>

Maintenant ouvez jquery.flexslider.js. Nous allons modifier l’intérieur de la balise <a> afin d’avoir une structure semblable à celle que l’on a vu en première partie. Pour ce faire, allez à la ligne 137 du script et modifier là comme ça.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var directionNavScaffold = $('<ul class="flex-direction-nav">
     <li>
          <a class="prev" href="#">
               <span>' + slider.vars.prevText + '</span>
               <div class="prev-hover">' + slider.vars.prevText + '</div>
          </a>
     </li>
     <li>
          <a class="next" href="#">
               <span>' + slider.vars.nextText + '</span>
               <div clas="next-hover">' + slider.vars.nextText + '</div>
          </a>
     </li>
</ul>');

C’est tout pour la modification du script. Nous pouvez maintenant faire notre CSS avec la même méthode que ci-dessus. Une seule chose va changer, cette fois nous n’utiliserons aucune image, mais vraiment tout en CSS. Let’s go !

Maintenant deux choix s’offrent à nous : soit nous faisons nos styles dans un nouveau document, soit nous écrasons les styles existant. Ici nous allons les écraser, mais si jamais pour une raison quelconque vous voulez garder les styles de bases vous pouvez faire votre CSS dans un nouveau fichier.

Pour commencer modifions les styles de la balise <a>. Dans flexslider.css à la ligne 50, remplacez les styles existant par ceux ci-dessous.

1
2
3
4
5
6
7
8
9
10
11
12
13

.flex-direction-nav li a {
	width: 80px; 
	height: 80px; 
	margin: -13px 0 0; 
	display: block; 
	position: absolute; 
	top: 50%; 
	cursor: pointer; 
	text-decoration: none;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	text-align: center;
}

Maintenant, appliquons le style des deux span, puis changeons la position des class .next et .prev. On enlève aussi le background définit sur chacun d’eux.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

.flex-direction-nav li a span {
	width: 60px;
	height: 60px;
	background: #000;
	display: block;
	color: white;
	line-height: 50px;
 
	border-radius: 30px;
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
}
 
.flex-direction-nav li .next {
	right: -50px;
}
.flex-direction-nav li .prev {
	left: -30px;
}

Ensuite, on applique les styles de la div qui s’affichera. Dans un premier temps le style global, à 0 pixel en largeur et hauteur, puis nous lui appliquons son style définitif lors du rollover.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

.flex-direction-nav li a .prev-hover,
.flex-direction-nav li a .next-hover {
	width: 0px;
	height: 0px;
	background: #fff;
	color: black;
	line-height: 100px;
	margin-top: -80px;
	text-indent: -9999px;
	overflow: hidden;
 
	border-radius: 50px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 30px;
 
	-webkit-transition: all 0.8s ease;
	-moz-transition: all 0.8s ease;
	-o-transition: all 0.8s ease;
	transition: all 0.8s ease;
}
 
.flex-direction-nav li a:hover .prev-hover,
.flex-direction-nav li a:hover .next-hover {
	width: 100px;
	height: 100px;
	text-indent: 0px;
}

Si vous essayez à ce niveau là, l’effet fonctionne mais le bouton ne se place pas au bon endroit et on voit le texte arriver à l’extérieur du bouton, remédions à ça. Dans un premier temps, à l’aide des margin nous allons placer le bouton correctement.

1
2
3
4
5
6
7
8
9
10
11

.flex-direction-nav li a .prev-hover,
.flex-direction-nav li a .next-hover {
	margin-left: 30px;
	margin-top: -30px
}
 
.flex-direction-nav li a:hover .prev-hover,
.flex-direction-nav li a:hover .next-hover {
	margin-left: -10px;
	margin-top: -80px;
}

En indiquant ces valeurs là, nous plaçons le début de l’effet au centre du premier bouton, puis au rollover nous le déplaçons pour qu’il se place correctement une fois l’effet terminé.

Pour avoir un effet optimal, nous allons faire disparaitre le bouton principal se situant dans le span grâce à l’opacité. Pour terminer nous rajouterons une transition sur la balise <a> pour donner l’effet du CSS3.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.flex-direction-nav li a:hover span {
	opacity: 0;
}
 
.flex-direction-nav li a span {
	width: 60px;
	height: 60px;
	background: #000;
	display: block;
	color: white;
	line-height: 60px;
 
	border-radius: 30px;
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
 
	-webkit-transition: all 0.8s ease;
	-moz-transition: all 0.8s ease;
	-o-transition: all 0.8s ease;
	transition: all 0.8s ease;
}