Défilement d'images horizontalement

**mauyebo** · 17/10/2020, 14h48

Bonjour
je souhaite afficher un bandeau d'images (7 images 1100x340px) défilant sans saccades et sans "blanc" et démarrant avec la première image (image1.jpg) déjà en place. Si quelqu'un peut m'orienter vers un script .. bienvenu

j'en ai essayé plusieurs mais n'en ai pas trouvé avec un défilement "lisse"
avec MARQUEE scrollamount="1" c'est trop lent et si on accélère , ça saccade et de plus ça démarre sur un "blanc"

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
    <div class="element 1"><MARQUEE scrollamount="1">
<img src="img/image1.jpg" width="1100" height="340" alt=""/>
<img src="img/image2.jpg" width="1100" height="340" alt=""/>
<img src="img/image3.jpg" width="1100" height="340" alt=""/>
<img src="img/image4.jpg" width="1100" height="340" alt=""/>
<img src="img/image5.jpg" width="1100" height="340" alt=""/>
<img src="img/image6.jpg" width="1100" height="340" alt=""/>
<img src="img/image7.jpg" width="1100" height="340" alt=""/>
    </MARQUEE>

Merci

**Archimède** · 18/10/2020, 17h34

Salut,
peut-être commencer par ne faire qu'une seule image avec tes photos bout à bout. Faire un tileset...
Ensuite la faire défiler dans un canvas avec window.requestAFrame. J'avais fait un truc comme ça, il y a quelques années...
J'ai retrouvé le fichier :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang='fr'>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <style>
     #cancan{
      border:1px solid black;
     }
    </style>
  </head>
  <body>
    <canvas id="cancan" width="780" height="170">
     votre navigateur ne supporte pas la balise canvas
    </canvas>
 
  <script type="text/javascript">
       var c = document.getElementById("cancan");
       var ctx = c.getContext("2d");
       var x=-1;  
       var im=new Image();
       im.src='tilsav.png';
 
      window.requestAFrame = (function(){
       return  window.requestAnimationFrame       ||
               window.webkitRequestAnimationFrame ||
               window.mozRequestAnimationFrame    ||
               function( callback ){
               window.setTimeout(callback,25);  //intervalle timer  25 ms  c'est mieux, ça scintillait...:fps=1/(25/1000)=1000/25=40 frames/s (Hz)
               };
       })();
 
 
       function draw() { 
         x+=1;
         ctx.drawImage(im,x,0);
         ctx.drawImage(im,x-780,0);
         if (x==780) x=-1;
       }
 
        function render(){
         draw();
         window.requestAFrame(render);
        }
        window.addEventListener('load',render);
 </script>
  </body>
</html>

C'est plutôt fluide...

**mauyebo** · 18/10/2020, 18h23

Bonne pioche !! ça fonctionne plutôt bien .. merci Archimède

**Archimède** · 18/10/2020, 19h00

Merci mais maintenant avec les transitions CSS, on peut faire mieux...

**mauyebo** · 18/10/2020, 19h41

ok .. mais encore ?
Si on peut faire mieux ...

**Archimède** · 18/10/2020, 21h25

Regarde plutôt du côté des animation CSS... :
https://www.w3schools.com/css/css3_animations.asp

**mauyebo** · 18/10/2020, 23h04

ok , je vais poursuivre le lièvre ..
merci

**NoSmoking** · 19/10/2020, 10h09

Bonjour,

Envoyé par Archimède

mais maintenant avec les transitions CSS, on peut faire mieux...

Mieux je ne sais pas mais je ne résiste pas à l'envie et je te mets ce lien : Diaporama avec défilement automatique, qui te montre également ce que l'on peut obtenir simplement avec les animations CSS.

Néanmoins dans certains cas l'utilisation du JavaScript peut s'avérer utile !

**Archimède** · 19/10/2020, 19h51

Après, je me souviens qu'en actionscript (flash), on baladait un masque devant un tileset pour les animations... Je ne me suis jamais essayé en javascript... Peut-être, pourrais-tu gagner encore en fluidité avec cette méthode.

**mauyebo** · 20/10/2020, 20h04

Pour l'instant, ce que j'ai trouvé de mieux , de plus fluide , et qui correspond à mes recherches, c'est la grande image avec window.requestAFrame et le code d'Archimède . Ce qui me gène un peu c'est de ne pas pouvoir faire la même chose avec mes 7 (ou plus) images individuelles , ce qui me permettrait de varier plus facilement l'ordre de mon défilement . Là , pour varier, il faut que je fasse plusieurs tileset. Mais, bon c'est quand même pas mal ... Je vais poursuivre vers les CSS car en cherchant, je trouve d'autres choses qui peuvent m'intéresser ..
merci

**javatwister** · 21/10/2020, 11h21

Et si tu aimes le vintage, je peux te ressortir un script d'archive: http://javatwist.imingo.net/defilim.htm

L'intérêt c'est de pouvoir travailler avec des tailles d'images aléatoires.

Défilement d'images horizontalement

JavaScript

Discussions similaires

Partager

Partager