Animer des images

mlina26 Messages postés 3 Date d'inscription Statut Membre Dernière intervention -
mlina26 Messages postés 3 Date d'inscription Statut Membre Dernière intervention - 2 juil. 2016 à 11:54

Bonjour,
J'ai 44 images d'une plante (dessin) qui grandit et à 0,15 secondes pour chaque image cela fait un sorte de mini-dessin animé. Je voudrais l'animer automatiquement en CSS pour l'intégrer sur mon site mais je ne sais pas comment faire. J'ai vu que c'était possible, mais je n'ai pas compris, j'espère que vous pourrez m'expliquer... o_O Je l'ai mis en format vidéo mais ça ne me plaît pas, ni en gif, j'aimerais vraiment l'animer en CSS, et si possible pas en Javascript. J'aimerai que chaque image apparaisse 0,15 secondes puis une autre, ect jusqu'à la dernière qui resterait sans bouger (je veux faire effectuer l'animation 1 seule fois). Je sais que je m'exprime mal mais j'espère que vous m'aurez comprise. Merci

Afficher la suite

A voir également:

Animer des images
Des images - Guide
Recherche des images - Guide
Réduire taille images - Guide
Ia qui génére des images - Accueil - Intelligence artificielle
Mes images photos - Guide

1 réponse

Réponse 1 / 1
DelNC Messages postés 2360 Statut Membre 2 010
Bonjour

J'avais fait un script pour afficher les images les unes parès les autres.
Ce code marche sur des pages internet faites en html et php
```
<head>
<script type="text/javascript">
var tab = ["image1.jpg",
	       "image2.jpg",
		  .....
		 "image4.jpg"];
var secondes = 10;
var numero = -1;
var
aleatoire = false;

function changerImage () {
	if (aleatoire) {
	var n = numero;
	while (n == numero) {
	n = Math.floor(Math.random() *
	tab.length);
	}
	numero = n;
	}
	else {
	numero++;
	if (numero >= tab.length) numero =0;
	}
	document.getElementById('image1.jpg').src =
	tab[numero];
	setTimeout("changerImage();", secondes*20);
	}
</script>
</head>
```
Pour la vitesse de changement d'image, c'est dans la partie
setTimeout("changerImage();", secondes*20);

Partie à mettre dans le <body>
```
<img width="150" src="" id="image1.jpg"/>
	<script type="text/javascript">
		
	</script>
```
1
1. ElementW Messages postés 5690 Statut Contributeur 1 293
  
  setTimeout("changerImage();", secondes*20);
  Il est préférable d'utiliser
  setTimeout(changerImage, secondes*20);
  , vu que 1. la fonction ne prend pas de paramètres, 2. passer un string revient à faire un
  eval
  dessus lors du déclenchement du timer, et
  eval
  c'est le mal, car lent et pas sécurisé. Autant passer la référence de fonction directement, donc.
  
  0
2. mlina26 Messages postés 3 Date d'inscription Statut Membre Dernière intervention
  
  Merci beaucoup ça marche super même si c'est du js :D
  
  0

Animer des images

1 réponse

Discussions similaires

Newsletters