Défilement d'images horizontalement

Version imprimable

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:

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

1 pièce(s) jointe(s)

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:

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

18/10/2020, 18h23
mauyebo

défilement

Bonne pioche !! ça fonctionne plutôt bien .. merci Archimède
18/10/2020, 19h00
Archimède

Merci mais maintenant avec les transitions CSS, on peut faire mieux...
18/10/2020, 19h41
mauyebo

transitions css

ok .. mais encore ?
Si on peut faire mieux ...
18/10/2020, 21h25
Archimède

Regarde plutôt du côté des animation CSS... :
https://www.w3schools.com/css/css3_animations.asp
18/10/2020, 23h04
mauyebo

css

ok , je vais poursuivre le lièvre ..
merci
19/10/2020, 10h09
NoSmoking

Bonjour,

Citation:

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 !
19/10/2020, 19h51
Archimède

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.
20/10/2020, 20h04
mauyebo

cancan

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
21/10/2020, 11h21
javatwister

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.