[Résolu] Menu animé sur la page d'accueil d'Alsacréations

Bonjour les loulous.

Désolé pour cette question "basique" mais j'aurai voulu savoir comment le menu de la page d'accueil avait pu être animé?

Je m'explique.

Sur l'accueil du site, on a les trois images et le nom des menus apprendre, forum et emploi.

Au passage de la souris, l'image bouge (rien d'extraordinaire) mais le fait est que ce mouvement est modéré par un laps de temps défini au début du hover et à la fin.

J'aurai voulu savoir comment cela était gérable: CSS, Js?

Merci d'éclairer ma lanterne
Modifié par r41nb0w (09 Feb 2011 - 19:50)

Bonjour,

C'est du JavaScript qui est utilisé.

Merci Laurie-Anne.

Laurie-Anne a écrit :
C'est du JavaScript qui est utilisé.

Mince.

J'avais vu un script mais je pensais que c'était uniquement pour Google Analytics.

C'est donc une partie de ce script-ci?

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-1456483-4']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

Modifié par r41nb0w (09 Feb 2011 - 14:49)

Bonjour,

Non, ce n'est pas une partie de ce code. Il faut plutôt regarder le fichier http://www.alsacreations.com/js/global.js?v=20100819. C'est basé sur la librairie JQuery également.

Merci Tony Monast.

J'ai un menu qui, au hover, grandit.

J'ai voulu tester en mettant le lien vers le fichier .js et en modifiant les éléments ce qui donne:

/* Background-Position Animations - @author Alexander Farkas v. 1.21 */
(function(b){if(!document.defaultView||!document.defaultView.getComputedStyle){var d=jQuery.curCSS;jQuery.curCSS=function(g,e,h){if(e==="background-position"){e="backgroundPosition"}if(e!=="backgroundPosition"||!g.currentStyle||g.currentStyle[e]){return d.apply(this,arguments)}var f=g.style;if(!h&&f&&f[e]){return f[e]}return d(g,"backgroundPositionX",h)+" "+d(g,"backgroundPositionY",h)}}var c=b.fn.animate;b.fn.animate=function(e){if("background-position" in e){e.backgroundPosition=e["background-position"];delete e["background-position"]}if("backgroundPosition" in e){e.backgroundPosition="("+e.backgroundPosition}return c.apply(this,arguments)};function a(f){f=f.replace(/left|top/g,"0px");f=f.replace(/right|bottom/g,"100%");f=f.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");var e=f.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);return[parseFloat(e[1],10),e[2],parseFloat(e[3],10),e[4]]}b.fx.step.backgroundPosition=function(f){if(!f.bgPosReady){var h=b.curCSS(f.elem,"backgroundPosition");if(!h){h="0px 0px"}h=a(h);f.start=[h[0],h[2]];var e=a(f.options.curAnim.backgroundPosition);f.end=[e[0],e[2]];f.unit=[e[1],e[3]];f.bgPosReady=true}var g=[];g[0]=((f.end[0]-f.start[0])*f.pos)+f.start[0]+f.unit[0];g[1]=((f.end[1]-f.start[1])*f.pos)+f.start[1]+f.unit[1];f.elem.style.backgroundPosition=g[0]+" "+g[1]}})(jQuery);

// Menu
	$('#logoMenu').css({backgroundPosition: '0 -37px'}).hover(function() {
		$(this).stop().animate({backgroundPosition:"0 -14px"}, {duration:200});
	},function() {
		$(this).stop().animate({backgroundPosition :"0 -25px"}, {duration:200});
	});

Cependant, cela ne fonctionne pas.

Je n'ai pas touché la fonction mais j'ai juste adapté ma div #logoMenu et son positionnement.

J'ai oublié quelque chose?

Bonjour,

Simple question bête.

As-tu importé la librairie jquery ?

Si ce n'est pas le cas, tu as un appel ci-dessous (des versions plus recente sont dispo).

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

http://jquery.com

Edit : oublie du bonjour ...
Modifié par Belkira (09 Feb 2011 - 16:00)

Tellement bête que je ne l'avais pas fait

Merci Belkira mais toujours rien de visible sur le hover...

As-tu une page en ligne? Ça nous permettrait de voir les erreurs Javascript s'il y en a.

Pardon, je développe en local mais je suis en train d'upload ce qui pose problème.

C'est sur mon "site".

N'hésitez pas à faire des retours d'ailleurs.

slt jai un blem en ie6 : leffet de survol napareil pas dans firefox et chrome normal mais ie6 nn

code html :

<div id="contenue">
<dl>
<dt class="png">Campagne DéLICE DANONE</dt>
<dd>06 Janvier 2011</dd>
<dd>06 Janvier 2011</dd>
<dd>06 Janvier 2011</dd>
<dd>06 Janvier 2011</dd>
<dd>06 Janvier 2011</dd>
<dd>06 Janvier 2011</dd>

</dl>

fichier CSS :

#contenue{
width:890px;
float:left;
margin-left:70px;
margin-top:20px;
}
#contenue dl{ width:890px; float:left;}
#contenue dl dt{ text-indent:40px; line-height:70px; text-align:center; background: url(../gif/bt-camp.gif) no-repeat; height:60px; width:890px; float:left; font-family: impact, Arial, Gadget, sans-serif ; font-size:20px; color:#298ca4; letter-spacing:1px;}
#contenue dl dd{text-align:center; float:left; height:18px; width:886px; background:#fff; border-bottom:1px solid #298ca4; border-left:1px solid #298ca4; border-right:1px solid #298ca4; text-align:center;
font-family:impact, Arial, Gadget, sans-serif ; font-size:13px; color:#298ca4; letter-spacing:1px;}
#contenue dl dd:hover{text-align:center; float:left; height:18px; width:886px; background:#298ca4; text-align:center; font-family:impact, Arial, Gadget, sans-serif ; font-size:13px; color:#fff; letter-spacing:1px;
}

Bonjour miss sara.

miss sara a écrit :
slt jai un blem en ie6

Effectivement, le problème est peut-être que le navigateur en question n'est plus à jour. On en est à la version 9 bêta si je ne m'abuse.

D'ailleurs, IE8 le voit sans problème.

Après, je ne comprends pas trop en quoi mon sujet t'aide à résoudre ton problème, le mieux étant que tu cliques ici pour te faire ton propre sujet, mesure de lisibilité oblige.
Modifié par r41nb0w (09 Feb 2011 - 17:39)

Bonjour r41nb0w,

Tu dois placer la librairie Jquery et aussi ton code JS pour le menu à la fin du document, juste avant </body>. La librairie JQuery doit être appelée avant le code JS du menu.

Si tu souhaites les garder en haut, tu dois utiliser document ready de JQuery pour appeler le code d'animation du menu.
Modifié par Tony Monast (09 Feb 2011 - 18:07)

Merci super, j'ai déplacé les deux lignes d'appel en fin de body et mis dans le bon ordre.

L'effet fonctionne.

Il ne reste plus qu'à le personnaliser car, pour l'instant, l'animation ne rend pas bien.

En fait, ma div de menu apparait au hover du mot menu. Probablement là que le bas blesse.

Je vais voir comment optimiser cela.

Merci encore à toi!

Ps: ton entreprise prend des stagiaires en gestion de projet multimédia cette année?

Bonjour,

Désolé, l'entreprise ne prend pas de stagiaires et même si c'était le cas, j'ai cru voir que tu habitais en France, alors qu'elle est au Québec. Le trajet en avion matin et soir deviendrait pénible.

Tony Monast a écrit :
Désolé, l'entreprise ne prend pas de stagiaires et même si c'était le cas, j'ai cru voir que tu habitais en France, alors qu'elle est au Québec. Le trajet en avion matin et soir deviendrait pénible.

Je cherche au Canada pour l'an prochain et il me faut une grosse boite informatique qui combine multimédia, informatique et gestion de projet pour mon stage de quatre mois.

Donc non, je ne suis pas fou

Ah d'accord!

Malheureusement, nous sommes une boîte de moins de 10 employés, alors il faudra jeter un oeil ailleurs.

Merci quand même pour la réponse.

et si tu as des contacts informatiques dans les environs de chez toi, je suis preneur