11550 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Transition fluide entre repos et survol d'un lien

Avant tout bonjour à tous,

Il me semble que ça fait des lustres que je ne me suis plus rendus sur ce forum et pour cause, j'avais quelques peu laissé tomber le développement. Aujourd'hui je m'y remet peu à peu mais évidemment les techniques ont évoluées et je suis un peu à la rue à certain niveau.

Je suis donc désolé de débarqué ainsi mais je rencontre un petit soucis et malgré mes recherches je ne trouve pas de solution. Les termes utilisés lors de mes recherches sont plus qu'imprécis, ceci explique certainement mes échecs.

Comme un dessin est souvent plus explicite qu'un long discours voici ce que j'aimerai réaliser.

http://img692.imageshack.us/img692/9639/illumenu.png

La réalisation des deux états fut un jeu d'enfant avec css mais ce que j'aimerai, si c'est possible, c'est qu'il y ai une transition entre l'état repos et le survol.
En somme, que la "boite" du lien descende lentement et que la semi transparence gris foncé bascule lentement vers la gris clair. Pareil pour la couleur du texte.

Si on exclu flash, j'imagine que ce n'est possible qu'en employant un peu de javascript et je pensais que jquery m'apporterait peut être la solution. Si vous pouviez me suggérer le nom d'une fonction, un tuto, ou quoi que ce soit d'autre qui pourrait m'aider à le réaliser je vous en serait grandement reconnaissant.

D'avance merci à tous.
Modifié par poupsylo (31 Aug 2011 - 14:17)
Salut.
Effectivement, c'est aisément réalisable avec javascript, surtout si tu utilise jquery.
Je te recommanderais de construire ton menu en html/css, en prévoyant l'état survolé.
A partir de là, ce sera assez simple d'ajouter une couche de js/jquery, en nous montrant la page en ligne .
Tu peux déjà regarder: hover (évènement) et animate (effect)
Wow, déjà non pas une, mais deux réponses, un tout grand merci, je vais regarder vos liens de suite et j'édite le sujet dès que le tout est fonctionnel.
(On ne sait jamais que j'ai des questions sur les fonctions Smiley langue )

Plus sérieusement, encore un grand merci, ça va m'être plus que probablement très utile !
Sans javascript dans tous les navigateurs c'est difficile (IE < 10), sinon il est possible d'utiliser CSS3 animation pour tous les navigateurs récents.


li a {
			display: block;
			width: 125px;
			height: 50px;
			border-radius : 0 0 15px 15px;
			line-height :50px;
			text-decoration : none;
			color:#ccc;
			font-weight : bold;
			text-align : center;
			background : rgb(120,120,120);
			background : rgba(120,120,120,0.9);
			-webkit-transition-property: all;
				-webkit-transition-duration: 1s;
				
          	-moz-transition-property: all;
				-moz-transition-duration: 1s;
				
			-o-transition-property: all;
				-o-transition-duration: 1s;
				
			-ms-transition-property: all;
				-ms-transition-duration: 1s;

				transition-property: all;
				transition-duration: 1s;
		}
		
		li a:hover {
			height: 100px;
			line-height : 100px;
			background : rgb(200,200,200);
			background : rgba(200,200,200,0.6);
			color: #2B99D4;
		}


Exemple ici css3 animations
Hello,

Une petite idée vite fait pour combiner le meilleur des deux mondes.

Mettre une classe hasNoJs sur la balise HTML, et la retirer via JS (en fait, faire un préchargement de styles CSS via Javascript, mais en inversant la méthode)
<html class="hasNoJS">
    <head>
        <!-- Preload for styles with JS not enabled -->
        <script type="text/javascript">document.documentElement.removeAttribute('class');</script>


Faire une détection via JS sur la possibilité ou non d'utiliser les transitions (je te renvoie vers ce gist qui propose une fonction de détection des propriétés CSS), et stocker le résultat dans un booléen.

En cas de support des transitions, ajouter une classe hasTransition sur <html> ou <body> (un peu comme le fait Modernizr)

Donc en gros dans la CSS: 
li a {
	//Transition
}

.hasNoJs li a:hover, .hasNoJs li a:focus, 
.hasTransition li a:hover, .hasTransition li a:focus {
	//Ton rollover en css
}

et dans ton JS 

	var hasTransition = detectCssProperty('transition');

	if (hasTransition === true) {
		//Ajout de la classe pour les navigateurs capables
	} else {
		//Code de ton anim
	}

Modifié par Florian_R (31 Aug 2011 - 13:08)
Merci beaucoup pour toutes vos réponses, j'ai réussi à le mettre en place via le tuto proposé par Vincent.
Je vais quand même étudié les autres propositions histoire d'en apprendre un peu plus.

Encore un grand merci !!!
Sujet clos
Aller à