Transition css3

Bonjour j'aimerais faire sur mon site des mots qui defilent, je pensse que c'est possible de le faire avec les transitions en css3, mais je n'ai aucune idée comment faire.
Si vous ne m'avez pas compris je veux faire comme sur ce site
http://www.streetcourses.com/
Modifié par ronytexasranger (02 Sep 2011 - 19:32)

bonsoir,

valide sur chrome, safari et firefox version 5 et plus uniquement :

	@-webkit-keyframes myanimation {
		from { left: 300px;    }
    	to   { left: -100px; }
	}

	@-moz-keyframes myanimation {
		from { left: 300px;    }
    	to   { left: -100px; }
	}

	 span {
	 	-webkit-animation-name: myanimation;
	 	-webkit-animation-iteration-count: infinite;
	 	-webkit-animation-duration: 10s;
	  	-webkit-animation-timing-function :linear;
	  	-moz-animation-name: myanimation;
	 	-moz-animation-iteration-count: infinite;
	 	-moz-animation-duration: 10s;
	  	-moz-animation-timing-function :linear;
	  	position : relative;	 	
		}
		
	div {
		margin : 15px auto;
		border : 1px solid red;
		width : 300px;
		overflow: hidden;
	}

<div><span>Du texte qui défile</span></div>

Je te lance sur la piste sauf que les keyframes sont dispo sur webkit et FF seulement et que c'est ce qu'il te faut pour lancer l'animation

Edit : Correction pour ajouter le fonctionnement sous FF5+, à noter également que sur le plan de l'accessibilité il faudrait un mécanisme pour désactiver l'effet.
Modifié par rs459 (02 Sep 2011 - 21:00)

Bonjour,

je ne pense pas que ce soit faisable avec les transitions. La transition permet de changer d'une valeur à une autre suite à un évenement (un hover par exemple). pour un défilement de mots, ou d'éléments, tu vas avoir plusieurs valeurs différentes de positionnements, et ici dans ton exemple, y a pas d'évenement "provocateur". donc regardes plutôt du côté de JavaScript....

FloydinBremen a écrit :
Bonjour,

je ne pense pas que ce soit faisable avec les transitions. La transition permet de changer d'une valeur à une autre suite à un évenement (un hover par exemple). pour un défilement de mots, ou d'éléments, tu vas avoir plusieurs valeurs différentes de positionnements, et ici dans ton exemple, y a pas d'évenement "provocateur". donc regardes plutôt du côté de JavaScript....

C'est possible mais pas dans tous les navigateurs (opera, IE , FF < 5) , sinon pour chrome safari et FF 5+ , c'est possible.

A voir, si après il est possible de déclencher via JS, notamment en rajoutant une classe peut être au chargement de la page.

donc tant qu'à coller du JavaScript, autant tout faire en Javascript. et plus de souci au niveau navigateur. .

C'est vrai que c'est très efficace de faire défiler les mots comme ça. Le contenu de la page devient automatiquement invisible pour le lecteur qui focalise directement sur cette superbe animation (digne de Pixar) et pour couronner le tout ça donne immédiatement un côté professionnel et beaucoup de style (ça bouge et c'est bo).

ben, ma foi, les dégouts et les coups leurres, cela ne se discute pas, hein? si le copain-là, il veut des machins qui cassent les yeux.

Reste à voir dans quel contexte cela s'inscrit.

C'est évident qu'une preuve de faisabilité, ne sera pas digne d'une animation pixar...

Quand à la focalisation de l'utilisateur, là encore tout dépend le contexte, il est probable qu'au contraire le message soit ignoré (banner blindness).

Enfin je préfère encore ça, en matière de faute de gout, à du Comic Sans totalement illisible.

Sinon pour stopper l'animation et se conformer au critère 2.2.2 des WCAG 2.0

<a href="#stop-animation" title"Arrêter l'animation (si image)">Arrêter l'animation</a>
	<div><span id="stop-animation">Du texte qui défile</span></div>

#stop-animation:target {
		-webkit-animation-iteration-count: 1;
		-moz-animation-iteration-count: 1;
	}

Modifié par rs459 (03 Sep 2011 - 10:33)