Niveau : Expert

Slideshow en CSS3

Tutoriel par (WebDesigner grapilleur de Kiwiz, Strasbourg)
Créé le , mis à jour le (33345 lectures)
Tags : css, xhtml, target, css3, transitions, keyframes, slideshow

Sommaire


Améliorations, discussion et suggestions

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 :