Animer des images

Fermé

mlina26 Messages postés 3 Date d'inscription lundi 23 février 2015 Statut Membre Dernière intervention 2 juillet 2016 - Modifié par mlina26 le 2/07/2016 à 09:57
mlina26 Messages postés 3 Date d'inscription lundi 23 février 2015 Statut Membre Dernière intervention 2 juillet 2016 - 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

A voir également:

Animer des images
Des images - Guide
Ia qui crée des images - Guide
Images enregistrées - Forum Gravure
Google images - Guide
Comment fairte apparaître lisiblement les images enregistrées su - Forum Windows

1 réponse

Réponse 1 / 1

DelNC Messages postés 2234 Date d'inscription samedi 25 octobre 2014 Statut Membre Dernière intervention 22 février 2020 2 002
2 juil. 2016 à 10:12

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">
		<!--
		changerImage();
		// -->
	</script>

ElementW Messages postés 4816 Date d'inscription dimanche 12 juin 2011 Statut Contributeur Dernière intervention 5 octobre 2021 1 228
2 juil. 2016 à 10:39

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.

mlina26 Messages postés 3 Date d'inscription lundi 23 février 2015 Statut Membre Dernière intervention 2 juillet 2016
2 juil. 2016 à 11:54

Merci beaucoup ça marche super même si c'est du js :D

Discussions similaires

calcule nombre des pixels "noir" dans un image (noir/blanc)

code couleur associé a une image

voir ses images enregistrés

ou sont enregistrées les images

Aligner 2 photos côte à côte...

Discussions similaires

Newsletters