Images défilant sur un cylindre (scrolling images)

Soyez le premier à donner votre avis sur cette source.

Vue 9 533 fois - Téléchargée 1 495 fois

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.

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
129
Date d'inscription
dimanche 9 décembre 2001
Statut
Membre
Dernière intervention
12 janvier 2009

Sympatique ...
Je suis d'accord, il faut un API
Petit bug, si la souris se trouve sur le défilant lors du chargement de la page, les images n’apparaissent pas. Il faut que la souris sorte du bloc pour qu'il commence à défiler et afficher les images.
Messages postés
7
Date d'inscription
dimanche 14 mars 2004
Statut
Membre
Dernière intervention
29 mai 2013

Superbe effet 3D, félicitations !
Messages postés
103
Date d'inscription
mardi 12 juillet 2011
Statut
Membre
Dernière intervention
3 janvier 2013

Je connais c'est pas mal.
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
5
C'est un cylindre, mais non circulaire ;) Il aurait été intéressant de construire une API pour votre script, pour faciliter l'installation. Du genre :

cylindre.add("Nomdelimage","srcdelimage.jpg",function(event){alert('Un click s'est produit!'});
cylindre.diametre="50px";
cylindre.init();

Quelque chose du genre, tu vois ;) Sinon bon travail et bonne persévération, très bel effet 3D ;)

JDMCreator

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.