Centrage d'image avec effet de rotation

Télécharger le projet
Commenter

Description

source inspiré par la précédente on clic sur une image et elle part de son point d'origine pour arriver au centre de la page

et un petit ajout de dernière minute l'image effectue une rotation durant l'animation qui ne sera visible que par les navigateurs supportant les transformations du css3 firefox opera chrome et safari

page teste

Source / Exemple : 

//-------------------------------------------------------------
//  Nom Document : kcentre
//  Auteur       : kazma (Kamel.A)
//  Objet        : cemage   [http://www.javascriptfr.com/]
//  Création     : 28.04.2011
//-------------------------------------------------------------
//  Mise à Jour  : 00.00.2011
//  Objet        : neant
//-------------------------------------------------------------
//-(*)------------------

var kcentre={

finileft:0,
finitop:0,
ratiow:0,
ratioh:0,
rota:0,
rota2:0,
divim:'null',
dde:document.documentElement,

cloclo:function(lui){

  if(kcentre.divim!='null'){
  kcentre.divim.parentNode.removeChild(kcentre.divim);
  }
  var le_clone=lui.cloneNode(true);
  le_clone.style.position='absolute';
  le_clone.style.opacity=0;
  le_clone.style.borderStyle='solid';
  le_clone.style.borderWidth =1+'px';
  le_clone.style.borderColor='white';
  le_clone.style.zIndex=kcentre.zidex();
  kcentre.divim=document.body.appendChild(le_clone);
  kcentre.taille();
 },

taille:function(){

  var ddn=(navigator.vendor) ? document.body : document.documentElement;

  var tailleh=kcentre.divim.offsetHeight;
  var taillew=kcentre.divim.offsetWidth;
  var fenetreh=kcentre.dde.clientHeight/100*50
    
  kcentre.finitop=Math.round((kcentre.dde.clientHeight/2)-(fenetreh/2))+ddn.scrollTop;
  kcentre.finileft=Math.round((kcentre.dde.clientWidth/2)-((taillew/tailleh)*(fenetreh/2)))+ddn.scrollLeft;
  kcentre.ratioh=(kcentre.finitop-kcentre.divim.offsetTop)/10;
  kcentre.ratiow=(kcentre.finileft-kcentre.divim.offsetLeft)/10;
  kcentre.taillehra=(fenetreh-tailleh)/10;
  kcentre.taillewra=Math.round((((taillew/tailleh)*fenetreh)-taillew)/10);
  kcentre.rota=360/10
  
  if(kcentre.ratiow < 1 && kcentre.ratiow > 0){
   kcentre.ratiow=1;
  }
  if(kcentre.ratiow > -1 && kcentre.ratiow < 0){
   kcentre.ratiow=-1;
  }
  if(kcentre.ratioh < 1 && kcentre.ratioh > 0){
   kcentre.ratioh=1;
  }
  if(kcentre.ratioh > -1 && kcentre.ratioh < 0){
   kcentre.ratioh=-1;
  }
  kcentre.carre();
 },

carre:function(){

  if(kcentre.ratioh>0){
   if(kcentre.divim.offsetTop+Math.round(kcentre.ratioh)>kcentre.finitop){
    kcentre.divim.style.top=kcentre.finitop+'px';
   }
  }
  if(kcentre.ratioh<0){
   if(kcentre.divim.offsetTop+Math.round(kcentre.ratioh)<kcentre.finitop){
    kcentre.divim.style.top=kcentre.finitop+'px';
   }
  }
  
  if(kcentre.ratiow>0){
   if(kcentre.divim.offsetLeft+Math.round(kcentre.ratiow)>kcentre.finileft){
    kcentre.divim.style.left=kcentre.finileft+'px';
   }
  }
  if(kcentre.ratiow<0){
   if(kcentre.divim.offsetLeft+Math.round(kcentre.ratiow)<kcentre.finileft){
    kcentre.divim.style.left=kcentre.finileft+'px';
   }
  }
  
  kcentre.divim.style.height=kcentre.divim.offsetHeight+kcentre.taillehra+'px';
  kcentre.divim.style.width=kcentre.divim.offsetWidth+kcentre.taillewra+'px';
  kcentre.divim.style.MozTransform='rotate('+kcentre.rota2+'deg)';
  kcentre.divim.style.WebkitTransform='rotate('+kcentre.rota2+'deg)';
  kcentre.divim.style.OTransform='rotate('+kcentre.rota2+'deg)';
  kcentre.divim.style.transform='rotate('+kcentre.rota2+'deg)';
  kcentre.rota2+=kcentre.rota;
  
  if(kcentre.divim.offsetTop!=kcentre.finitop){
   
   kcentre.divim.style.top=kcentre.divim.offsetTop+Math.round(kcentre.ratioh)+'px';
  }
  
  if(kcentre.divim.offsetLeft!=kcentre.finileft){
   
   kcentre.divim.style.left=kcentre.divim.offsetLeft+Math.round(kcentre.ratiow)+'px';
  }
  
  if(parseInt(navigator.userAgent.substring(30,31))<=8){
   kcentre.divim.style.filter = 'alpha(opacity=60)';
  } 
  else{
   kcentre.divim.style.opacity=(kcentre.divim.style.opacity*100+10)/100;
  }
    
  if(kcentre.divim.offsetLeft==kcentre.finileft || kcentre.divim.offsetTop==kcentre.finiTop){
   
   if(document.all && !window.opera){
    kcentre.divim.style.filter = 'alpha(opacity=100)';
   } 
   else{
    kcentre.divim.style.opacity=1;
   }
   kcentre.divim.style.MozTransform='rotate(0deg)';
   kcentre.divim.style.WebkitTransform='rotate(0deg)';
   kcentre.divim.style.OTransform='rotate(0deg)';
   kcentre.divim.style.transform='rotate(0deg)';
   kcentre.divim.onclick=kcentre.quit;
   kcentre.rota2=0;
   return false;
  }
  
  setTimeout(kcentre.carre,30);
 },

quit:function(){
  if(kcentre.divim != 'null'){
   document.body.removeChild(kcentre.divim);
   kcentre.divim='null';
  }
 },
 

zidex:function (){
  var allElements = document.getElementsByTagName('*');
  var vaval=0;
  var vaz=0;
  for (var i = 0; i< allElements.length; i++){
   if(allElements[i].parentNode==document.body){
    vaz =parseInt(navigator.appName.substring(0,5)=="Micro" ? allElements[i].currentStyle.zIndex : getComputedStyle(allElements[i],null).getPropertyValue('z-index'));
    if(vaz>vaval){
     vaval=vaz;
    }
   }
  }
  return vaval+1
 }
}

Conclusion :

ouille
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (@karamel)