Discussion :

[ultimate_3d]

Bonsoir,

Je souhaite réaliser une défilement automatique d'images (bannière) en utilisant uniquement du css. ( 10 sec entre chaque images par )

Donc pas de javascript, jquery,etc...

Pourriez-vous s.vp. me donner un exemple ou quelques informations pour y parvenir ?

Merci d'avance.
Vincent.

[12monkeys]

Bonsoir

Le CSS ne permet pas de faire de défilement à ma connaissance...

Soit tu passes pas un gif animé soit tu peux utiliser la balise HTML <marquee> attention c'est une balise non standard, donc ton site ne sera pas valide... Il faudra aussi vérifier qu'il fonctionne avec tous les navigateurs (a ma connaissance : IE et Firefox, j'ai jamais testé les autres...)

[Erwan31]

Bonsoir,
je doute que ça soit faisable sans JS (le temps de latence est plutôt de l'ordre du comportement plus que de la présentation) mais voir du côté du module CSS3 2D Transforms > http://www.w3.org/TR/css3-2d-transforms/#animation

La translation fonctionne déjà via CSS3 (avec les préfixes propriétaires pour le moment)
Exemple (pour filter ce n'est peut-être pas encore faisable, faire une recherche ici)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
.translation {
	-moz-transform: translate(-10px,-20px);  /* FF3.5+ */
	-webkit-transform: translate(-10px,-20px);  /* Saf3.1+, Chrome */
	-o-transform: translate(-10px,-20px);  /* Opera 10.5+ */
	filter:  progid:DXImageTransform.Microsoft.BasicImage();  /* IE6,IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage()"; /* IE8 */
}

[ultimate_3d]

Bonsoir,
je doute que ça soit faisable sans JS (le temps de latence est plutôt de l'ordre du comportement plus que de la présentation) mais voir du côté du module CSS3 2D Transforms > http://www.w3.org/TR/css3-2d-transforms/#animation

La translation fonctionne déjà via CSS3 (avec les préfixes propriétaires pour le moment)
Exemple (pour filter ce n'est peut-être pas encore faisable, faire une recherche ici)

Bonsoir

Le CSS ne permet pas de faire de défilement à ma connaissance...

Soit tu passes pas un gif animé soit tu peux utiliser la balise HTML <marquee> attention c'est une balise non standard, donc ton site ne sera pas valide... Il faudra aussi vérifier qu'il fonctionne avec tous les navigateurs (a ma connaissance : IE et Firefox, j'ai jamais testé les autres...)

Bonjour,

Merci pour les infos. Je vais essayer cela....

Existe t'il d'autres solutions (pas nécessairement en css) et plus ou compatible avec tous les browsers ?

Merci d'avance.
Vincent.

[Erwan31]

Bonjour,
Merci pour les infos. Je vais essayer cela....
Existe t'il d'autres solutions (pas nécessairement en css) et plus ou compatible avec tous les browsers ?
Merci d'avance.
Vincent.

Pourquoi faire compliquer quand on peut faire simple? ^^