Centrage d'image avec effet de rotation

Soyez le premier à donner votre avis sur cette source.

Vue 6 890 fois - Téléchargée 1 255 fois

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

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

cs_yodi
Messages postés
14
Date d'inscription
samedi 12 avril 2008
Statut
Membre
Dernière intervention
18 janvier 2014
-
GENIAL Effect différent avec ie9 mais top génial..
cs_davidmnestor
Messages postés
24
Date d'inscription
lundi 11 août 2008
Statut
Membre
Dernière intervention
11 janvier 2011
-
Bonjour à tous,
Est ce que l'un de vous peux m'endiquer où je peux trouver une démo de ce super diaporama ?

Merci et bonne journée
davidmnestor
cs_arta
Messages postés
98
Date d'inscription
dimanche 22 janvier 2006
Statut
Membre
Dernière intervention
24 juillet 2013
-
RE

Cest vrai que ça manque de commentaire, tu pourrais en rajouter au moins un ligne 138 : setTimeout(kcentre.carre,30);
C'est la vitesse d'affichage, normale sous IE et en rotation pour les autres.

Pour la position des miniatures, ma foi il reste simplement à faire une feuille de style et choisir parmi toutes les possibilités (perso en menu)

Par contre avant de noter, ce serait sympa et trés utile pour les internautes qui n'ont pas l'habitude, de mettre un bouton de fermeture de l'agrandissement.

Je te remercie kazma.
@karamel
Messages postés
1721
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
8 novembre 2019
49 -
avant tout retelechaarge le zip car j'ai fait des modifs ensuite pour la taille de l'image il faut modifier la ligne 47 j'ai mis un commentaire

var zoomage=Math.round((kcentre.dde.clientHeight/100*60)/tailleh)

le chiffre 60 c'est la taille que l'image aura par rapport a la fenetre du navigateur en pourcentage il suffit juste de modifier ce chiffre pour modifier la taille de l'image
cs_arta
Messages postés
98
Date d'inscription
dimanche 22 janvier 2006
Statut
Membre
Dernière intervention
24 juillet 2013
-
RE

J'ai bien vu qu'en jouant par ici, on agrandit l'image, mais elle est décentrée:
kcentre.taillehra=(fenetreh-tailleh)/5; kcentre.taillewra=Math.round((((taillew/tailleh)*fenetreh)-taillew)/5);

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.