Images défilant sur un cylindre (scrolling images)

Télécharger le projet
Commenter

Description

Une autre manière de faire défiler des images est de simuler une visualisation 3D en "collant" les images sur un cylindre (à base de polygone régulier) que l'on fait "tourner".

On joue sur la dimension affichée des images ainsi que sur la luinosité (transparence sur un fond gris foncé).

Toutes les images ont la même dimension.
La zone des images défilantes peut être placée librement.

Choix du nombre d'images et du nombre de pans 'nPn' du cylindre.

Le dimamètre du cylindre (var 'D'), calculé à l'aide de la dimension des images et de 'nPn', détermine la dimension de la zone des images défilantes.

L'exemple 'horizontal' propose nPn=5 et le 'vertical' nPn=9, essayez d'autres valeurs, en particulier 2.

La vitesse de défilement dépend des variables 'tim' et 'npP'.

Le mouvement s'arrête lorsque la souris survole les images.

Il est possible d'associer une action au "click" sur une image:
l'exemple propose l'ouvertue d'une nouvelle page.

Source / Exemple : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>Images défilant horizontalement sur un cylindre</title>
  <script type="text/javascript">
  //<![CDATA[
    var pag=["Anjaneri","Chittorgarh","Fathepur Sikri","Gangaikondacholapuram"
      ,"Khiching","Kuruvatti","Madurai","Ramgarh","Sanchi","Sravanabelgola","Vadnagar"];
    var tim=50;  // temps de pause en millisecondes entre les appels à Nxt
    var wIm=120; // largeur en pixels des images
    var hIm=160; // hauteur en pixels des images
    var nPn=5;   // nombre de pans du cylindre (nPn>=2)
    var npP=40;  // nombre de pas par pan;
    var pad=6;   // padding de la zone des images défilantes
    var tmr,nIm=pag.length;        // timer, nombre d'images nIm>=nIv
    var nIv=Math.floor((nPn+1)/2); // nombre d'images visibles
    var A=2*Math.PI/nPn,E=A/npP;   // angle (en rad) par pan et par pas
    var D=Math.floor((wIm+2)/Math.sin(A/2)); // diamètre (en pixels) du cylindre
    var R=D/2;                     // rayon (en pixels) du cylindre
    var cosA=Math.cos(A),sinA=Math.sin(A),cosE=Math.cos(E),sinE=Math.sin(E);
    var iIm=nIm-nIv,iE=0,uA0=R*Math.cos(-A/2),vA0=R*Math.sin(-A/2),uA=uA0,vA=vA0;

    function Nxt() {
      var i,k=iIm,u=uA,v=vA,uu,w,st,r=R+pad;
      for (i=0; i<nIv; i++){
        uu=u; u=uu*cosA-v*sinA; v=uu*sinA+v*cosA; // rotation(A)
        w=(uu>u+2)?uu-u-2:0;
        st=document.getElementById('im'+k).style;
        st.left=(r+u)+'px'; st.width=w+'px'; st.opacity=w/wIm; 
        if (--k<0) k=nIm-1;
      }
      u=uA; uA=cosE*u-sinE*vA; vA=sinE*u+cosE*vA; // rotation(E)
      if (++iE>=npP) {
        iE=0; uA=uA0; vA=vA0;
        if (++iIm>=nIm) iIm=0;
      }
    }
    function Clk(i) { // à remplacer par vos propres 'actions'
      window.open('PagHorizontal/'+pag[i]+'.html','_self');
    }
    function Ini() { // dans body, ajustez également la position absolue du div:id='imd'
      var i, s='', e=document.getElementById('imd');
      for (i=0; i < nIm; i++) s += "<img id='im"+i+"' onclick='Clk("+i+")' title='"
        +pag[i]+"' style='position:absolute; top:"+pad+"px; width:0; height:"+hIm
        +"px; cursor:pointer' src='ImgHorizontal/"+pag[i]+".jpg'/>";
      e.style.height=(2*pad+hIm)+'px'; e.style.width=(2*pad+D)+'px'; e.innerHTML=s;
      tmr=setInterval('Nxt()',tim);
      // les 3 lignes suivantes ne sont pas indispensables
      s="<span style='color:red;'>Selection par le nom:</span>";
      for (i=0; i < nIm; i++) s += "<br/><a href='PagHorizontal/"+pag[i]+".html'>"+pag[i]+"</a>";
      window.document.getElementById('lsN').innerHTML=s;         
    }
  //]]>
  </script>
</head>

<body style='background-color:#BBBBBB' onload='Ini()'>
   <div id='imd' style='position:absolute; left:20px; top:35px; background-color:#444444'
      onmouseover='clearInterval(tmr)' onmouseout='tmr=setInterval("Nxt()",tim)'>
   </div>
   <!-- la suite n'est pas indispensable et sert juste d'exemple -->
   <div style='float:left; width:99px; height:160px; padding:400px 6px 6px 6px; background-color:#CCCCCC;'>
      <hr />Obtenez<br/>les exemples<br/>complets:<br/>horizontal<br/>et vertical:<br/><br/> &nbsp;
      <a href='http://www.william-voirol.ch/Prog/ImagesDefilantes/Cylindre.zip'>Zip</a>
   </div>
   <div style='margin-left:260px;'> <!-- ajustez éventuellement la valeur margin-left -->
      <p style='font-size:18px; color:blue;'>Quelques temples du Karnataka en Inde</p>
      <div id='lsN' style='width:180px; height:130px; background-color:#FFFFDD; padding-left:4px; 
         overflow:auto; margin-left:80px;'></div> <!-- contient la liste de noms -->
      <p style='color:green;'>
         <br/>Les temples de l'Inde vous intéressent ? :<br/> &nbsp;
         <a href='http://www.william-voirol.ch'>Splendeur de l'Inde</a>
      </p>
      <hr />
      <p style='font-size:24px;'><br/>Images défilant horizontalement sur un cylindre</p>
      <p>
         -  Choix du nombre d'images et du nombre de pans 'nPn' du cylindre.<br/>
         -  La zone des images défilantes peut être placée librement.<br/>
         -  Sa largeur dépend de la largeur des images et de 'nPn'.<br/>
         -  Dans l'exemple nPn=5; essayez d'autres valeurs, en particulier 2.<br/>
         -  La vitesse de défilement dépend des variables 'tim' et 'npP'.<br/>
         -  Le mouvement s'arrête lorsque la souris survole les images.<br/>
         -  Il est possible d'associer une action au "click" sur une image:<br/>
            &nbsp; &nbsp; &nbsp; l'exemple propose l'ouvertue d'une nouvelle page.
      </p>
      <p style='color:red;'>
         Testé avec les navigateurs:<br/>
         Internet Explorer 8 et 9, Firefox 5, Navigator 9,<br/>
         Google Chrome 11, Opera 11, Safari 5.
      </p>
   </div>
</body>
</html>

Conclusion :


Peut-on faire plus simplement ?

Faites directement un test:
http://www.william-voirol.ch/Prog/ImagesDefilantes/Cylindre/horizontal.html
http://www.william-voirol.ch/Prog/ImagesDefilantes/Cylindre/vertical.html

Remarque: de temps en temps, des espaces (caractères blancs) s'immiscent
dans certains textes. (CodeS- SourceS est au courant du problème).
Si c'était le cas ici, enlevez les espaces avant d'utiliser les adresses Web ci-dessus.

Le programme proposé devrait fonctionner avec tous les navigateurs courants.

Deux exemples complets (horizontal et vertical) se trouve sur le fichier zip.
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 (William VOIROL)