Quelques améliorations ?
Ce que je vous ai proposé n'est qu'un travail sur des fonctionnalités de CSS3 encore en travaux. Il est donc fort probable que certains points changent du côté du W3C, ou même du côté des implémentations (d'ailleurs j'ai eu un petit souci lors d'un test sous la dernière version d'Opera, actuellement la 10.60).
Quelques suggestions soulevées
- Sur le système de slideshow avec contrôle au clic, il serait sympa de pouvoir passer de la première image à la dernière, et inversement. C'est relativement simple à ajouter,
- Toujours sur ce même slideshow, dès qu'on dépasse 3 éléments à visualiser on pourrait ajouter des petites pastilles en pied d'élément pour passer du 3ème au 5ème directement, par exemple,
- Sur les effets de transition, pour les deux slideshow, il serait intéressant de tester plusieurs autres effets que le simple mouvement, cela pourrait être sympa.
Quelques propositions de résolution et d'amélioration
Mesures en pourcentage
Lors d'un échange avec Raphi, celui-ci m'a suggéré l'utilisation de pourcentages afin de gérer plus aisément les décalages et dimensions des différents éléments.
Voici la mise en pratique directement sur son site web : http://kanraf.fr/
Solutionnement du saut créé lors du clic sur une ancre
Vincent De Oliveira a travaillé sur une solution afin de supprimer le saut naturellement créé par le clic sur une ancre.
Rappelons qu'il s'agit du comportement naturel de l'ancre, qui a pour but d'emmener le visiteur à un endroit ciblé dans la page.
La solution consiste à cibler des éléments cachés (display:none;) et agir sur les frères indirect (General siblings : ~).
Voici le résultat de ses recherches : CSS3Create - Empêcher le scroll avec l'utilisation de :target
Discutons-en sur le forum
Pour ceux qui souhaitent discuter de tout cela, je vous invite à suivre le forum.
Liens utiles :
Commentaires
Bonjour,
Merci pour cette super aide.
J'ai néanmoins un problème d'affichage, en effet je n'ai qu'une seule photo qui défile les deux autres pas.
Est-ce que dans votre exemple vous n'avez qu'une seule image avec plusieurs couleurs ? (personnellement je pense que non car vous diriger bien vers 3 images)
Avez-vous une idée d'où peut provenir l'erreur ?
la seule chose que je n'ai pas faite (et que je ne comprends pas quoi faire) est
" Ne pas oublier les préfixes pour chaque navigateur (@-moz-keyframes , @-webkit-keyframes, etc.)"
Merci d'avance pour le temps que vous allez consacrer à ma réponse
Bien à vous
Bonjour,
Merci pour cette super aide.
J'ai néanmoins un problème d'affichage, en effet je n'ai qu'une seule photo qui défile les deux autres pas.
Est-ce que dans votre exemple vous n'avez qu'une seule image avec plusieurs couleurs ? (personnellement je pense que non car vous diriger bien vers 3 images)
Avez-vous une idée d'où peut provenir l'erreur ?
la seule chose que je n'ai pas faite (et que je ne comprends pas quoi faire) est
" Ne pas oublier les préfixes pour chaque navigateur (@-moz-keyframes , @-webkit-keyframes, etc.)"
Merci d'avance pour le temps que vous allez consacrer à ma réponse
Bien à vous
Bonjour,
J'ai essayé d'adapter votre tuto, mais je me retrouve, sans que cela fonctionne, avec mes deux bandeaux l'un au dessus de l'autre...
Merci de votre aide ?
le code HTML:
<div id="slidebanner">
<ul id="sContent">
<li><a href="https://www.monsite.com" target="_blank"><img src="https://www.monsite/bannierre-haute-1.jpg" alt="Nouveau site 1" style="margin-left: auto; margin-right: auto;" width="1100px" height="61px" /></a></li>
<li><a href="https://www.monsite2.com" target="_blank"><img src="https://www.monsite2.com/bannierre-haute-2.jpg" alt="Mon site 2, découvrez ce site !" style="margin-left: auto; margin-right: auto;" width="1100px" height="61px" /></a></li>
</ul>
</div>
le CSS :
@keyframes AutoSlide {
from 0s to 0s, from 0s to 3s {
left: 0px; /*1ère image*/
}
from 3s to 3s, from3s to 6s {
left: -1100px; /*2ème image*/
}
}
#slidebanner {
position: relative;
width: 100%;
height: 100%;
margin: 0px;
overflow: hidden;
}
#sContent li {
display: inline;
}
#sContent {
position: absolute;
top: 0;
left: 0;
width: 1100px;
margin: 0;
padding: 0;
/*CSS3 keyframes animation*/
animation-name: AutoSlide;
-webkit-animation-name: AutoSlide;
-moz-animation-name: AutoSlide;
-o-animation-name: AutoSlide;
animation-duration: 6s;
-webkit-animation-duration: 6s;
-moz-animation-duration: 6s;
-o-animation-duration: 6s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-o-animation-timing-function: linear;
}
Merci d'avance !
Bonjour,
J'ai essayé d'adapter votre tuto, mais je me retrouve, sans que cela fonctionne, avec mes deux bandeaux l'un au dessus de l'autre...
Merci de votre aide ?
le code HTML:
<div id="slidebanner">
<ul id="sContent">
<li><a href="https://www.monsite.com" target="_blank"><img src="https://www.monsite/bannierre-haute-1.jpg" alt="Nouveau site 1" style="margin-left: auto; margin-right: auto;" width="1100px" height="61px" /></a></li>
<li><a href="https://www.monsite2.com" target="_blank"><img src="https://www.monsite2.com/bannierre-haute-2.jpg" alt="Mon site 2, découvrez ce site !" style="margin-left: auto; margin-right: auto;" width="1100px" height="61px" /></a></li>
</ul>
</div>
le CSS :
@keyframes AutoSlide {
from 0s to 0s, from 0s to 3s {
left: 0px; /*1ère image*/
}
from 3s to 3s, from3s to 6s {
left: -1100px; /*2ème image*/
}
}
#slidebanner {
position: relative;
width: 100%;
height: 100%;
margin: 0px;
overflow: hidden;
}
#sContent li {
display: inline;
}
#sContent {
position: absolute;
top: 0;
left: 0;
width: 1100px;
margin: 0;
padding: 0;
/*CSS3 keyframes animation*/
animation-name: AutoSlide;
-webkit-animation-name: AutoSlide;
-moz-animation-name: AutoSlide;
-o-animation-name: AutoSlide;
animation-duration: 6s;
-webkit-animation-duration: 6s;
-moz-animation-duration: 6s;
-o-animation-duration: 6s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-o-animation-timing-function: linear;
}
Merci d'avance !