begin process at 2012 05 28 10:35:59
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Trucs Amusants

 > IMAGES DÉFILANT SUR UN CYLINDRE (SCROLLING IMAGES)

IMAGES DÉFILANT SUR UN CYLINDRE (SCROLLING IMAGES)


 Information sur la source

Note :
7 / 10 - par 3 personnes
7,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Trucs Amusants Classé sous :image, cylindre, défiler, scrolling, javascript Niveau :Initié Date de création :22/08/2011 Vu / téléchargé :3 265 / 387
Auteur : william voirol

Ecrire un message privé
Site perso
Commentaire sur cette source (4)
Ajouter un commentaire et/ou une note

 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

  • <!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>
<!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.

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources du même auteur

Source avec Zip Source avec une capture ONGLETS ET CHANGEMENT INSTANTANÉ DE LA LANGUE
Source avec Zip Source avec une capture RÉSOLUTION D'UN SYSTÈME D'ÉQUATIONS LINÉAIRES À N INCONNUES
Source avec Zip VECTEURS ET MATRICES: OUTILS GRAPHIQUES UTILES
Source avec Zip DIALOGUE ENTRE FENÊTRES MÈRE ET FILLE
Source avec Zip ROTATION D'UNE IMAGE, ANIMATION
Toutes les sources de william voirol

 Sources de la même categorie

Source avec Zip IMAGES DÉFILANT VERTICALEMENT (SCROLLING IMAGES) par william voirol
Source avec Zip IMAGES DANSANTES 4: MOUVEMENT DE LA TORTUE par william voirol
Source avec Zip IMAGES DANSANTES 3: MOUVEMENT ALÉATOIRE ORIENTÉ par william voirol
Source avec Zip IMAGES DANSANTES 2: MOUVEMENT ALÉATOIRE SANS SUPERPOSITIONS par william voirol
Source avec Zip IMAGES DANSANTES 1: MOUVEMENT ALÉATOIRE LIBRE par william voirol
Toutes les sources de la catégorie Trucs Amusants

 Sources en rapport avec celle ci

Source avec Zip ROTATION D'UNE IMAGE, ANIMATION par william voirol
Source avec Zip IMAGES DÉFILANTES EN JAVASCRIPT (SCROLLING IMAGES) par william voirol
Source avec Zip Source avec une capture ANNIMATION QUI RECOUVRE L'ÉCRAN AVEC UN PNG SEMI TRANSPARENT par djmmix
Source avec Zip Source avec une capture BOITE DE TEXTE TYPE SCROLLBAR AVEC SCROLL VERTICAL par celeg
Source avec Zip INFOS BULLE PERSONNALISÉES par abdelaziz_info

Commentaires et avis

Commentaire de jdmcreator le 23/08/2011 01:15:34

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

Commentaire de HACKANDROID le 23/08/2011 01:55:31 6/10

Je connais c'est pas mal.

Commentaire de dardelphi le 23/08/2011 10:39:29 8/10

Superbe effet 3D, félicitations !

Commentaire de MangaII le 29/08/2011 09:04:55 7/10

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.

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

faire défiler du texte et integrer un javascript sur une image [ par melane35 ] Bonjour, je suis toute nouvelle sur ce site et je réalise actuellement 1 site avec dreamweaver. J'ai quelques questions : il me semble qu'il est possi image aléatoir en javascript [ par HatMan ] bonjours,jaimerai pouvoir charger une image aléatoir dans un tableau pour chaque démaragemerci de votre aide[me] know cl3D M3th0[D] Ha|-Man[mIRC] Mass Comment vérifier la présence d'un fichier en javascript [ par LauKo ] Bonjour a toutes et tous,Voila j'aimerai savoir si il est possible de vérifier la présence d'un fichier en javascript.Je m'explique, je monte un petit image transparente par javascript ? [ par fmazoue ] est il possible de généré des image transparente par javascript^parce que en fait l'autre jour je m'amusai a faire un petit script qui simulait le dép Simuler de thread en Javascript [ par petit_stagiaire ] Bonjour,j'ai créé une fonction qui permet de faire tourner une image.elle se rappelle elle-même avec in setTimeout qui simule la vitesse.function tour Preview avancée d'images JAVASCRIPT [ par dreamed ] Bonjour,J'essaie de mettre en place sur mon site une fonction de preview d'image à partir de champ file (avant téléchargement).J'ai déjà un script qui pb javascript popup image [ par kobeenforce ] &lt;html&gt;&lt;head&gt;&lt;title&gt;Diaporama&lt;/title&gt;&lt;SCRIPT LANGUAGE="Javascript" src="./Images.js"&gt; &lt;/script&gt;&lt;SCRIPT LANGUAGE= Changer le Background image via onmouseover [ par dorian53 ] Bonjour,J'ai une question de NB mais je n'ai pas trouvé ma réponse :Comment changer d'image (et pas couleur comme on trouve partout) en background sur soucis Javascript : faire afficher une image à des coordonnées souhaitées après clic sur un bouton [ par zarzar ] bonjour j'ai dans ma page 2 champs X et Y + bouton dans un formulaire : &lt;form name="position"&gt; X : &lt;input type="text" na Javascript image [ par Snurffle ] JE N'arrive pas a mettre une image sur mon site,l'image ne s'affiche point !!!


Nos sponsors


Sondage...

Comparez les prix


Archos 7 home tablet - 2 Go
Entre 149€ et 159€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

Photothèque

Photo Frau auf Feld mit KopfsalatPhoto Beautiful El Capitan Yosemite National Park
Photo Colors of sea-life 

Visiter la photothèque

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 5,273 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)