Difference between revisions of "Team:Aix-Marseille/JS 2015/logo animation"

Line 1: Line 1:
−
<html>
+
    //PARAMETRAGE DES IMAGES A CHOISIR POUR TRAJECTOIRE SUIVANT LE SENS
−
<script type="text/javascript">
+
addressUrl = window.location.href;
−
    var $targetId;
+
img_left=new Image();
−
var $target;
+
    img_left.src="http://localhost/Wiki/CSS_2015Aix-Marseille/images_2015Aix-Marseille/mascotte-gauche.gif" ;
 +
img_right=new Image();
 +
img_right.src="http://localhost/Wiki/CSS_2015Aix-Marseille/images_2015Aix-Marseille/mascotte-droite.gif" ;
 
 
−
$(document).ready(automatic_slide);
+
  /*if (addressUrl.indexOf("Onglet 1") > 0 ) {
 +
          img_left=new Image();
 +
          img_left.src="https://static.igem.org/mediawiki/2013/e/e1/WIKI-MASCOT-RUNNING-LEFT-GREEN.gif" ;
 +
          img_right=new Image();
 +
          img_right.src="https://static.igem.org/mediawiki/2013/7/78/WIKI-MASCOT-RUNNING-RIGHT-GREEN.gif" ;
 +
}
 +
else if (addressUrl.indexOf("Onglet 2") > 0 ){
 +
          img_left=new Image();
 +
          img_left.src="https://static.igem.org/mediawiki/2013/d/dd/WIKI-MASCOT-RUNNING-LEFT-RED.gif" ;
 +
          img_right=new Image();
 +
          img_right.src="https://static.igem.org/mediawiki/2013/4/41/WIKI-MASCOT-RUNNING-RIGHT-RED.gif" ;
 +
} else if (addressUrl.indexOf("Onglet 3") > 0 ){
 +
          img_left=new Image();
 +
          img_left.src="https://static.igem.org/mediawiki/2013/8/84/WIKI-MASCOT-RUNNING-LEFT-BLUE.gif" ;
 +
          img_right=new Image();
 +
          img_right.src="https://static.igem.org/mediawiki/2013/5/54/WIKI-MASCOT-RUNNING-RIGHT-BLUE.gif" ;
 +
} else if (addressUrl.indexOf("Onglet 4") > 0 ){
 +
          img_left=new Image();
 +
          img_left.src="https://static.igem.org/mediawiki/2013/9/9d/WIKI-MASCOT-RUNNING-LEFT-BRONE.gif" ;
 +
          img_right=new Image();
 +
          img_right.src="https://static.igem.org/mediawiki/2013/a/a2/WIKI-MASCOT-RUNNING-RIGHT-BRONE.gif" ;
 +
} else if (addressUrl.indexOf("Onglet 5") > 0 ){
 +
          img_left=new Image();
 +
          img_left.src="https://static.igem.org/mediawiki/2013/1/17/WIKI-MASCOT-RUNNING-LEFT-ORANGE.gif" ;
 +
          img_right=new Image();
 +
          img_right.src="https://static.igem.org/mediawiki/2013/f/f7/WIKI-MASCOT-RUNNING-RIGHT-ORANGE.gif" ;
 +
} else {
 +
        img_left=new Image();
 +
        img_left.src="https://static.igem.org/mediawiki/2013/3/32/WIKI-MASCOT-RUNNING-LEFT.gif" ;
 +
        img_right=new Image();
 +
        img_right.src="https://static.igem.org/mediawiki/2013/6/6b/WIKI-MASCOT-RUNNING-RIGHT.gif" ;
 +
    };
 +
*/
 +
 
 +
 
 +
 
 +
$(document).ready(function(){
 +
var logoLefteft = 0;
 +
var menuCibles = $("#menu_ul li a");
 +
var img = $("#mascotte img");
 +
//var mid = img.offset().left + img.width()/2 - parseInt(img.css("left"));
 +
var lastActivatedIndex = "null";
 +
var mid = $("#mascotte").width/2 - img.width/2;
 
 
−
$(window).resize(update_prop);
+
//Placement Logo
 +
img.attr({"left" : mid});
 
 
−
function automatic_slide() {
+
//Lorsqu'un utilisateur survole un onglet, on déclenche l'animation
−
$('a[href*=#]').each(function()
+
menuCibles.mouseenter(function() {
−
{
+
animation($(this));
−
if ( location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,''))
+
lastActivatedIndex = $(this);
−
{
+
});
−
  this.hash.replace(/#/,'')
+
−
  $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
+
−
  $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
+
−
  if ($target)
+
−
  {
+
−
var targetOffset = $target.offset().top;
+
−
//console.log("//////"+targetOffset);
+
−
$(this).click(function()
+
−
{
+
−
  $("#nav li a").removeClass("active");
+
−
  $(this).addClass('active');
+
−
  $('html, body').animate({scrollTop: targetOffset}, 1000);
+
−
  return false;
+
−
});
+
−
  }  
+
−
}
+
−
});
+
−
}
+
 
 
−
<!--
+
//Lorsqu'un utilisateur zoom ou dézoom, on déclenche l'animation pour mettre l'image gif à sa place
−
function update_prop() {
+
$(window).resize(function() {
−
$('a[href*=#]').unbind("click");
+
if(lastActivatedIndex!="null") {
 +
animation(lastActivatedIndex);
 +
}
 +
});
 +
 +
//Fonction gérant l'animation du logo du système d'onglets
 +
function animation(e){
 +
//Calculs pour situations
 +
var destinationLeftLogo = e.offset().left + e.width()/2  - img.width()/2;
 +
img.stop();
 +
logoLeft = $("#mascotte img").offset().left;
 +
if(destinationLeftLogo > logoLeft) {
 +
img.attr({"src" : img_right.src});
 +
} else if (destinationLeftLogo < logoLeft){
 +
img.attr({"src" : img_left.src});
 +
}
 +
logoLeft = destinationLeftLogo;
 
 
−
$('a[href*=#]').each(function()
+
//Animation du logo
−
{
+
img.animate({left:destinationLeftLogo},500,
−
if ( location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,''))
+
function(){
−
{
+
img.attr({"src" : "http://localhost/Wiki/CSS_2015Aix-Marseille/images_2015Aix-Marseille/mascotte-statique.png"
−
  this.hash.replace(/#/,'')
+
});
−
  $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
+
−
  $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
+
−
 
+
−
  if ($target)
+
−
  {
+
−
    var targetOffset = $target.offset().top;
+
−
console.log("//////"+targetOffset);
+
−
+
−
$(this).click(function()
+
−
{
+
−
  $("#nav li a").removeClass("active");
+
−
  $(this).addClass('active');
+
−
  $('html, body').animate({scrollTop: targetOffset}, 1000);
+
−
  return false;
+
−
});
+
−
  } 
+
−
}
+
 
});
 
});
 
}
 
}
−
-->
+
−
</script>
+
});
−
</html>
+

Revision as of 16:46, 26 July 2015

   //PARAMETRAGE DES IMAGES A CHOISIR POUR TRAJECTOIRE SUIVANT LE SENS

addressUrl = window.location.href; img_left=new Image(); 

   img_left.src="http://localhost/Wiki/CSS_2015Aix-Marseille/images_2015Aix-Marseille/mascotte-gauche.gif" ;

img_right=new Image(); img_right.src="http://localhost/Wiki/CSS_2015Aix-Marseille/images_2015Aix-Marseille/mascotte-droite.gif" ; 

 /*if (addressUrl.indexOf("Onglet 1") > 0 ) {
         img_left=new Image();
         img_left.src="WIKI-MASCOT-RUNNING-LEFT-GREEN.gif" ;
         img_right=new Image();
         img_right.src="WIKI-MASCOT-RUNNING-RIGHT-GREEN.gif" ;

} 

else if (addressUrl.indexOf("Onglet 2") > 0 ){
         img_left=new Image();
         img_left.src="WIKI-MASCOT-RUNNING-LEFT-RED.gif" ;
         img_right=new Image();
         img_right.src="WIKI-MASCOT-RUNNING-RIGHT-RED.gif" ;

} else if (addressUrl.indexOf("Onglet 3") > 0 ){ 

         img_left=new Image();
         img_left.src="WIKI-MASCOT-RUNNING-LEFT-BLUE.gif" ;
         img_right=new Image();
         img_right.src="WIKI-MASCOT-RUNNING-RIGHT-BLUE.gif" ;

} else if (addressUrl.indexOf("Onglet 4") > 0 ){ 

         img_left=new Image();
         img_left.src="WIKI-MASCOT-RUNNING-LEFT-BRONE.gif" ;
         img_right=new Image();
         img_right.src="WIKI-MASCOT-RUNNING-RIGHT-BRONE.gif" ;

} else if (addressUrl.indexOf("Onglet 5") > 0 ){ 

         img_left=new Image();
         img_left.src="WIKI-MASCOT-RUNNING-LEFT-ORANGE.gif" ;
         img_right=new Image();
         img_right.src="WIKI-MASCOT-RUNNING-RIGHT-ORANGE.gif" ;

} else { 

       img_left=new Image();
       img_left.src="WIKI-MASCOT-RUNNING-LEFT.gif" ;
       img_right=new Image();
       img_right.src="WIKI-MASCOT-RUNNING-RIGHT.gif" ;
    };
  • /


$(document).ready(function(){ var logoLefteft = 0; var menuCibles = $("#menu_ul li a"); var img = $("#mascotte img"); //var mid = img.offset().left + img.width()/2 - parseInt(img.css("left")); var lastActivatedIndex = "null"; var mid = $("#mascotte").width/2 - img.width/2;

//Placement Logo img.attr({"left" : mid}); 

	//Lorsqu'un utilisateur survole un onglet, on déclenche l'animation

menuCibles.mouseenter(function() { animation($(this)); lastActivatedIndex = $(this); });

//Lorsqu'un utilisateur zoom ou dézoom, on déclenche l'animation pour mettre l'image gif à sa place $(window).resize(function() { if(lastActivatedIndex!="null") { animation(lastActivatedIndex); } });

//Fonction gérant l'animation du logo du système d'onglets function animation(e){ //Calculs pour situations var destinationLeftLogo = e.offset().left + e.width()/2 - img.width()/2; img.stop(); logoLeft = $("#mascotte img").offset().left; if(destinationLeftLogo > logoLeft) { img.attr({"src" : img_right.src}); } else if (destinationLeftLogo < logoLeft){ img.attr({"src" : img_left.src}); } logoLeft = destinationLeftLogo;

//Animation du logo img.animate({left:destinationLeftLogo},500, function(){ img.attr({"src" : "http://localhost/Wiki/CSS_2015Aix-Marseille/images_2015Aix-Marseille/mascotte-statique.png" }); }); }

});