Effet de rotation a 360° d'image avec acceleration deceleration

Soyez le premier à donner votre avis sur cette source.

Vue 9 020 fois - Téléchargée 2 367 fois

Description

c'est un effet de rotation a 360 degré avec plusieurs images utilisant la souris sur la zone ou ce situe l'image on peut aussi pousser l'image afin de créer un effet d?accélération décélération j'y est ajouter le préchargement des images afin d'assurer la fluidité de l'animation le script fonctionne avec firefox chrome opera et ie testé avec ie 8

++

page teste

Source / Exemple :

mode d'emploi

exemple pour 3 images

function init360(){

var element="img360"     // le premier parametre c'est l'id du div conteneur.
var nombre_images=72     // le deuxieme parametre c'est le nombre d'image que comprend l'animation.
var prefix='mamage/image_'   // le troisieme parametre c'est le repertoire ou se trouve les images avec le prefix des images.
var vitesse=10      // le quatrieme parametre est la vitesse de deceleration initiale

k31=new k360(element,nombre_images,prefix,vitesse);  //instanciation


var element="img361"
var nombre_images=90
var prefix=mamage2/part_
var vitesse=10

k31=new k360(element,nombre_images,prefix,vitesse);

var element="img363"
var nombre_images=64
var prefix=mamage4/San
var vitesse=10

k31=new k360(element,nombre_images,prefix,vitesse);

}

typeof window.addEventListener == 'undefined') ? window.attachEvent("onload", init360) : window.addEventListener("load", init360);  // appel de la fonction d'initialisation au chargement de la page



function k360(el,nb,rep,vitesse){

 this.preImages=new Array;
 this.chiffre=0;
 this.chiffre2=0;
 this.nbimage=nb;
 this.vitesse=vitesse*100;
 this.repertoire=rep;
 this.extention='.jpg';  //extention, type d'image
 this.dema='ok';
 this.elem=null;
 this.inter='';
 this.tbvar=[0,0,0,0,0,0];
 this.gene=general=document.getElementById(el);
 this.xx='';
 this.yy='';
 this.zz='';
 var is=this;
  
 
 // prechargement des images et affichage du pourcentage de prechargement

 this.precharge=function(){
  
  if (arguments.length==1){
   var is=arguments[0]
  }
  else{
   var is=this
  }
  
  var valcomplet=0;
  var general=is.gene;

  if(is.dema=='ok'){
   is.dema='fin';

   for (var i = 1; i <=is.nbimage; i++) {
   
    var z = i<10 ? "0"+i : ""+i;
    is.preImages[i] = new Image();
    is.preImages[i].src =is.repertoire+z+is.extention;
   }

   var constrution=document.createElement('span');
   constrution.appendChild(document.createTextNode('00 %'));
   general.appendChild(constrution);
  }
  
  for (var i = 1; i < is.preImages.length; i++){
   if(is.preImages[i].complete==true){
    valcomplet++;
   }
  }
  general.getElementsByTagName("span")[0].childNodes[0].nodeValue=Math.round((100/is.nbimage)*valcomplet)+' %';
  if(valcomplet==is.nbimage){
   general.removeChild(general.getElementsByTagName("span")[0]);
   var constrution=document.createElement('img');
   constrution.style.height=is.preImages[1].height;
   constrution.style.width=is.preImages[1].width;
   constrution.src = is.preImages[1].src;
   is.elem=general.appendChild(constrution);
   
   
 this.elem.onmousedown=function(event){is.temp(event)};
 
 
 this.xx= function(ev){is.selecte(ev)}
 this.yy=function(s){is.posi.call(is,s)}
 this.zz=function(s){is.temp2.call(is,s)}
   
   is.lancer(200,300);
   return false;
  }
  setTimeout(function() {is.precharge(is)},100);
 }
 
 this.precharge();  //lancement de la fonction precharge a l'instanciation
 
  
  
 //operation de deceleration et de la rotation des images


 this.deceleration=function(){
 
  var that=is
 
  if(that.tbvar[2]<10){
   clearInterval(that.inter);
   that.inter='vide';
   return false;
  }
  
  that.tbvar[3]=that.tbvar[2]*that.tbvar[4];
  that.elem.scrollLeft=that.elem.scrollLeft+that.tbvar[3];
  that.tbvar[2]-=10;
  
  
  that.chiffre2=that.chiffre2+that.tbvar[3];

  if(that.chiffre2>(that.nbimage*10)){
   that.chiffre2=5;
  }

  if(that.chiffre2<5){
   that.chiffre2=that.nbimage*10;
  }
  
  var i=Math.round(that.chiffre2/10)
  var z = i<10 ? "0"+i : ""+i;
  that.elem.src = that.repertoire+z+that.extention;
  
 }
 
}
 
 
 k360.prototype.selecte=function(ev){

 typeof window.addEventListener == 'undefined' ? event.returnValue = false : ev.preventDefault();

}

 //rotation d'image avec la souris
 
 k360.prototype.posi=function(s){

 s =(!s) ? window.event : s;

 var dde=(navigator.vendor) ? document.body : document.documentElement;
 
  s =(!s) ? window.event : s;
  
  this.chiffre2=this.chiffre2+this.chiffre-s.clientX + dde.scrollLeft;

  if(this.chiffre2>(this.nbimage*10)){
   this.chiffre2=5;
  }

  if(this.chiffre2<5){
   this.chiffre2=this.nbimage*10;
  }

  var i=Math.round(this.chiffre2/10)
  
  var z = i<10 ? "0"+i : ""+i;
  
  this.elem.src = this.repertoire+z+this.extention;
  
  this.chiffre=s.clientX + dde.scrollLeft;
}
 
 

 //recupération du temp et de la position de la souris au moment du mousedown

 
 k360.prototype.temp=function(s){

 clearInterval(this.inter);

 this.tbvar[2]=0
 var dde=document.documentElement;
 var s =(!s) ? window.event : s;
 var datee=new Date();
 this.tbvar[0]=(datee.getMilliseconds()+(datee.getSeconds()*1000));
 this.tbvar[1]=s.clientX;
 var that=this;
 this.chiffre=s.clientX + dde.scrollLeft;

 if(typeof window.addEventListener == 'undefined'){
  dde.attachEvent("onmousemove", this.xx)
  dde.attachEvent("onmousemove", this.yy)
  dde.attachEvent("onmouseup", this.zz)
 }
 else{
  dde.addEventListener("mousedown",this.xx, false);
  dde.addEventListener("mousemove", this.yy, false);
  dde.addEventListener("mouseup",this.zz, false);
 }
 this.elem.onmousedown='';
 
}
 
 
 // recuperation du temp au mouseup et soustraction avec le temp recupéré precedement qui 
 //donne la durée ecoulé entre le mousedown et le mouseup on fait la meme chose avec la
 // position de la souris afin de recuperé la distance parcourue
 //de ces deux parametre on en deduit la distance parcourue en un temp T

 
 k360.prototype.temp2=function(s){
 
 var dde=document.documentElement;
 var s =(!s) ? window.event : s;
 var setX =s.clientX;
 var datee=new Date();
 var ms=(datee.getMilliseconds()+(datee.getSeconds()*this.vitesse));
 this.tbvar[0]=ms-this.tbvar[0];
 this.tbvar[1]=this.tbvar[1]-setX;
 var that=this;

 if(typeof window.addEventListener == 'undefined'){
  
  dde.detachEvent("onmousemove", that.xx)
  dde.detachEvent("onmousemove", that.yy)
  dde.detachEvent("onmouseup", that.zz)
 }
 
 else{
  dde.removeEventListener("mousedown", this.xx, false);
  dde.removeEventListener("mousemove", this.yy, false);
  dde.removeEventListener("mouseup",this.zz, false);
 }
 
 this.elem.onmousedown=function(event){that.temp(event)};
 
 this.tbvar[5]=0
 var vitesse=Math.round((this.tbvar[1]/this.tbvar[0])*1100);
 this.tbvar[2]=((vitesse*vitesse)/2000)/2;
 this.tbvar[3]=vitesse/100;
 this.tbvar[4]=this.tbvar[3]/this.tbvar[2];
 
 if(this.tbvar[0]<500){
  
  this.inter=setInterval(this.deceleration,10);
 }
 
}

 // lancemant apres chargement des images de la rotation

 k360.prototype.lancer=function(duree, deplacement){    

  this.tbvar[0]=duree;
  this.tbvar[1]=deplacement;

  this.tbvar[5]=0;
  var vitesse=Math.round((this.tbvar[1]/this.tbvar[0])*1100);
  this.tbvar[2]=((vitesse*vitesse)/2000)/2;
  this.tbvar[3]=vitesse/100;
  this.tbvar[4]=this.tbvar[3]/this.tbvar[2];
  
  if(this.tbvar[0]<500){
  
   this.inter=setInterval(this.deceleration,10);
   
  }
 }


Conclusion :

ca roule

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

jjDai
Messages postés
291
Date d'inscription
vendredi 21 février 2003
Statut
Membre
Dernière intervention
13 mars 2015
-
Merci
cs_bdodan
Messages postés
7
Date d'inscription
dimanche 16 février 2003
Statut
Membre
Dernière intervention
11 août 2008
-
Merci de ta réponse JJDAI.
Je me doutais bien que c'était compliqué au niveau des photos. Les sites marchands qui proposent ce genre de présentation doivent y passer un sacré moment !
Encore félicitation pour ton site.
jjDai
Messages postés
291
Date d'inscription
vendredi 21 février 2003
Statut
Membre
Dernière intervention
13 mars 2015
-
Bonjour
bdodan : Pour une rotation vertical, pas de problème c'est juste une suite de photos sr un axe. A la limite en couchant le sujet lors de la prise de vue puis en redressant les photos, c'est tout à fait jouable.

Maintenant ce que tu évoques à savoir une rotation dans tous les sens me parait plus compliquée et surtout beaucoup plus long à mettre en œuvre, mais c'est jouable.
Comme ça à première vue il faudrait faire une cartographie sur une sphère pour faire la numérotation des images un peu comme les méridiens et les parallèles, ensuite calculer la nouvelle image à afficher en fonction du déplacement de la souris.
Ce serait intéressante à réaliser.
Mais ça ferait une palanquée de photos, en prenant comme base 32 photos sur un axe, ça ferait au bas mot sur 32*8meridiens = 256 photos.
En plus il faudrait monter un studio gyroscopique qui permette les rotations dans les 3 directions.
Si je trouve un peu(beaucoup) de temps, je vais tenter le coup pour voir.

Pour mon compteur, non j' ai un problème avec, il semble ne pas fonctionner correctement, il faut que je trouve un peu de temps pour me pencher dessus sérieusement.
cs_bdodan
Messages postés
7
Date d'inscription
dimanche 16 février 2003
Statut
Membre
Dernière intervention
11 août 2008
-
Bonjour JJDAI,
Ton site est très joli ! J'adore son graphisme.
Et l'effet de rotation est très fluide.
Juste une petite remarque ou plutôt suggestion : étant curieux de nature, est-il difficile d'appliquer également ton effet dans le sens haut/bas pour retourner ton image ? Je suppose que la principale difficulté est au niveau des prises de vues et non du script. On voit sur certains sites marchand une fonction qui permet de bouger un objet dans tous les sens.
En tous cas, Merci pour ton boulot et ton partage !

D@n
PS : le compteur de ton site est-il OK ?!? Il enregistre 3 visites alors que j'y suis allé déjà 2 fois...
jjDai
Messages postés
291
Date d'inscription
vendredi 21 février 2003
Statut
Membre
Dernière intervention
13 mars 2015
-
C'est exact, j'ai essayé de resté le plus générique, mais mon but étais de l'intégrer dans le CMS Xoops.
Sinon je t'ai envoyée un lien vers une zip avec une version autonome sur ta messageire.

JJdai

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.