Un gif animé qui traverse l'écran

Résolu
capsule77 Messages postés 12 Statut Membre -  
capsule77 Messages postés 12 Statut Membre -
Bonjour chère communauté,

Un peu de fun : je voudrai qu'un gif animé traverse l'écran de mon site internet (qu'il s'y superpose, il a un fond transparent). C'est une petite voiture. Je voudrai qu'elle entre par la gauche (qu'elle provienne d'hors-champs) et qu'elle disparaisse complètement à l'autre bout de la page.
Bonus : J'aimerai qu'une fois la voiture au bout et sortie de l'écran, qu'un autre gif (avec un autre véhicule) fasse de même, les un après les autres.

Remarque : Mon site a des marges automatiques pour qu'il soit centré quelque soit la dimension de la fenêtre (je ne sais pas si ça rentre en jeux pour le code).

Je sais que cela pourrait se faire en Flash, mais je souhaiterai vraiment avoir un site full HTML - Javascrit. Je crois bien que la solution est en DHTML mais je ne trouve pas de précision.

Merci d'avance de votre aide !!
vroum vroum !
A voir également:

19 réponses

Réponse 1 / 19
Ozimandias Messages postés 528 Statut Membre 46
 
Tu remplaces : 
}else{
                           voit.style.display='none'; // cette ligne rends le div invisible une fois qu'il est sorti de l'écran
                               clearTimeout(clock);}


par 

				}else{
				voit.style.left = -50+'px';
				clock = setTimeout("moveDiv()", 10);
				}


C'est une solution...
2
Réponse 2 / 19
Ozimandias Messages postés 528 Statut Membre 46
 
J'aai repris la fonction, elle était pleine d'erreurs^^ Dsl

voila la nouvelle version qui fonctionne: 

<script type="text/javascript">
function moveDiv() {



if (document.body)
{
var larg = (document.body.clientWidth);
} else
{
var larg = (window.innerWidth);
}  // récupère la largeur de la fenêtre



 var voit = document.getElementById('voiture'); // on récupère le div voiture


	pos_left = voit.style.left;
	
	valPX_larg_gauche = pos_left.indexOf('px', 0);
	valpos_left = pos_left.substring(0, valPX_larg_gauche);
	
	
	valpos_left2 = parseInt(valpos_left); // on viens de récupérer la valeur de la position left sans le px soit -50 
   	     
        larg2 = larg + 86; // remplacer x par la taille de ton image

				i=(valpos_left2 + 1); // tu remplaces le 1 ici si tu veux que ça aille plus vite
				
				if (i<larg2) {
				
        voit.style.left = (i)+'px'; 

				clock = setTimeout("moveDiv()", 1);
				
				}else{
                           voit.style.display='none'; // cette ligne rends le div invisible une fois qu'il est sorti de l'écran
                               clearTimeout(clock);}
} 


</script>
1
Réponse 3 / 19
Ozimandias Messages postés 528 Statut Membre 46
 
1 - Créer un div avant ou juste après ton <body>:
 <div id="voiture"><img.......></div>


2 - Appliquer le style suivant: 
style="position:absolute; top:10px; left:-50px;"

top et left correspondent à la position absolue de ton div. tu dois mettre left à "moins la taille de ton image + quelques pixels" pour qu'elle soit en dehors de ton écran

3 - ajouter un javascript : 
function moveDiv() {

if (document.body)
{
var larg = (document.body.clientWidth);
} else
{
var larg = (window.innerWidth);
}  // récupère la largeur de la fenêtre



 var voit = document.getElementById('voiture'); // on récupère le div voiture

	pos_left = voit.style.left;
	valPX_larg_gauche = pos_left.indexOf('px', 0);
	valpos_left = pos_left.substring(0, valPX_pos_left);
	valpos_left = parseInt(valpos_left); // on viens de récupérer la valeur de la position left sans le px soit -50 
        
        larg2 = larg+x; // remplacer x par la taille de ton image

        for (i=valpos_left; i<larg2; i++) {
            pos_left = i; // Cette boucle fait déplacer ton div en modifiant sa position par rapport à la gauche de la page. avance 1px par 1 px
        }
}


Tu lances cette fonction avec 

<body onLoad="moveDiv();">



J'espère que je n'ai pas fait de fautes de syntaxe.

Bon courage
0
Réponse 4 / 19
capsule77 Messages postés 12 Statut Membre
 
.... la page ne fonctionne plus (toute blanche), mais ça vient peut-être d'une erreur de caractère :

Quand je colle : 

<script type="text/javascript>
function moveDiv() {

if (document.body)
{
var larg = (document.body.clientWidth);
} else
{
var larg = (window.innerWidth);
}  // récupère la largeur de la fenêtre



 var voit = document.getElementById('voiture'); // on récupère le div voiture

	pos_left = voit.style.left;
	valPX_larg_gauche = pos_left.indexOf('px', 0);
	valpos_left = pos_left.substring(0, valPX_pos_left);
	valpos_left = parseInt(valpos_left); // on viens de récupérer la valeur de la position left sans le px soit -50 
        
        larg2 = larg+x; // remplacer x par la taille de ton image

        for (i=valpos_left; i<larg2; i++) {
            pos_left = i; // Cette boucle fait déplacer ton div en modifiant sa position par rapport à la gauche de la page. avance 1px par 1 px
        }
} 


</script>


entre 
</head>
et 
<body onLoad="moveDiv();">
le code de l'ensemble du body (en dessous à la suite) passe en bleu et rouge (au lieu des couleurs habituelles : noir, bleu, vert, rose). Comme s'il interprètait tout comme du script....
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 19
monkey_monk Messages postés 681 Statut Membre 131
 
Il ne peut rien y avoir entre </head> et <body>...
Place tout juste avant le </head> et ça devrait fonctionner !
0
Réponse 6 / 19
capsule77 Messages postés 12 Statut Membre
 
Voici l'ensemble de mon code.
J'ai collé le 
<script type="text/javascript> .... </script>
avant le </head> mais la suite du code reste en rouge et bleu.... et la page en front est toute blanche. 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>le titre de mon site</title>
<link href="../design/style_tiamad.css" rel="stylesheet" type="text/css">



<script type="text/javascript>
function moveDiv() {

if (document.body)
{
var larg = (document.body.clientWidth);
} else
{
var larg = (window.innerWidth);
}  // récupère la largeur de la fenêtre



 var voit = document.getElementById('voiture'); // on récupère le div voiture

	pos_left = voit.style.left;
	valPX_larg_gauche = pos_left.indexOf('px', 0);
	valpos_left = pos_left.substring(0, valPX_pos_left);
	valpos_left = parseInt(valpos_left); // on viens de récupérer la valeur de la position left sans le px soit -50 
        
        larg2 = larg+x; // remplacer x par la taille de ton image

        for (i=valpos_left; i<larg2; i++) {
            pos_left = i; // Cette boucle fait déplacer ton div en modifiant sa position par rapport à la gauche de la page. avance 1px par 1 px
        }
} 


</script>



</head>




<body onLoad="moveDiv();"> 

<div id="voiture"><img src="http://www.oceanelanouet.com/IMG/IMG_TM/email.gif"></div>

<div class="encart">

<div class="texte">
bla bla bla bla
<br>
à bientôt !
</div>

</div>



</body>
</html>


merci de ta patience :)
0
Réponse 7 / 19
Ozimandias Messages postés 528 Statut Membre 46
 
Oups... Grr la syntaxe...

<script type="text/javascript"> C'est ma faute

Et pour répondre à monkey_monk , tu peux mettre du javascript entre </head> et <body>. Je dis pas que c'est à faire mais ça fonctionne...
0
Réponse 8 / 19
monkey_monk Messages postés 681 Statut Membre 131
 
Oh ! Je l'ignorais... mais ne le ferais quand même jamais ! :D

0
Réponse 9 / 19
capsule77 Messages postés 12 Statut Membre
 
OK ! ça y est, l'image est entièrement visible en haut à gauche de ma fenêtre :) Mais...
- L'image ne se déplace pas
- Elle décale le reste du site vers le bas (ça fait donc une bande en haut, j'aimerai qu'elle passe par-dessus le site)

merci :)

Lien vers l'aperçu de la page : www.oceanelanouet.com/tiamad
0
Réponse 10 / 19
monkey_monk Messages postés 681 Statut Membre 131
 
Woh purée !
Le fond... je crois que mes yeux fondent... * (8X) *

Quand à ton gif... il ne bouge pas d'un poil chez moi ! Enfin, il est animé mais il ne se déplace pas.

Et pour le problème du passage "au-dessus", as-tu essayé de mettre z-index:99999; dans ton css #voiture ?

0
capsule77 Messages postés 12 Statut Membre
 
OK j'ai essayé z-index, mais la bande reste (cf. l'ensemble du code 2 postes plus bas en réponse à Ozimandias).
0
Réponse 11 / 19
Ozimandias Messages postés 528 Statut Membre 46
 
fait ça:



<div id="voiture" style="position:absolute; top:10px; left:-50px;"><img src="http://www.oceanelanouet.com/IMG/IMG_TM/email.gif"></div>

<body onLoad="moveDiv();">
0
capsule77 Messages postés 12 Statut Membre
 
OK j'ai sorti la <div> avec la voiture du body (dans l'ordre que tu m'indique), mais elle n'avance toujours pas...
0
Réponse 12 / 19
Ozimandias Messages postés 528 Statut Membre 46
 
tu as bien rajouté la partie style et ID dans ton div?

<div id="voiture" style="position:absolute; top:10px; left:-50px;"><img src="http://www.oceanelanouet.com/IMG/IMG_TM/email.gif"></div>

Oui excuse 2ème erreur:

dans le javascript:
for (i=valpos_left; i<larg2; i++) {
pos_left = i+'px';
0
Réponse 13 / 19
capsule77 Messages postés 12 Statut Membre
 
(Je mets les styles dans une feuille CSS à part, mais tes lignes y figurent bien)
J'ai fait la modif dans le Javascript, mais la voiture de démarre toujours pas :(


Voici donc le code actuel de la PAGE : 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>TiaMad - Tour Operator Solidaire Madagascar</title>
<link href="../design/style_tiamad.css" rel="stylesheet" type="text/css">



<script type="text/javascript">
function moveDiv() {

if (document.body)
{
var larg = (document.body.clientWidth);
} else
{
var larg = (window.innerWidth);
}  // récupère la largeur de la fenêtre



 var voit = document.getElementById('voiture'); // on récupère le div voiture

	pos_left = voit.style.left;
	valPX_larg_gauche = pos_left.indexOf('px', 0);
	valpos_left = pos_left.substring(0, valPX_pos_left);
	valpos_left = parseInt(valpos_left); // on viens de récupérer la valeur de la position left sans le px soit -50 
        
        larg2 = larg+86px; // remplacer x par la taille de ton image

        for (i=valpos_left; i<larg2; i++) {
            pos_left = i+'px'; // Cette boucle fait déplacer ton div en modifiant sa position par rapport à la gauche de la page. avance 1px par 1 px
        }
} 
</script>



</head>




<div id="voiture"><img src="http://www.oceanelanouet.com/IMG/IMG_TM/voiture.gif"></div>

<body onLoad="moveDiv();"> 

<div class="encart">

<div class="texte">bla bla bla</div>

</div>



</body>
</html>



Et sa feuille de STYLE : 
* {
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
}
body {
	/*background-image: url(http://www.oceanelanouet.com/IMG/IMG_TM/TMmotif_fond.gif);*/
	background:url(../IMG/IMG_TM/TMmotif_fond.gif);
	
	/*background:#CCCCCC;*/
	
}
/*pour centrer le site dans la fenetre*/
.encart {
	/*position:relative;*/
	background:url(../IMG/IMG_TM/page_construction.gif);
	width:550px;
	height: 545px;
	margin:auto;
}
.encart .texte {
	position:absolute;
	text-align:center;
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	padding: 210px 0px 0px 73px;
}
voiture {
	position:absolute; top:10px; left:-50px;
	z-index:99999;

}



H E L P
0
Réponse 14 / 19
Ozimandias Messages postés 528 Statut Membre 46
 
Le javascript n'accède pas à la feuille de style externe, ajoute le style enligne dans ta balise.
0
Réponse 15 / 19
capsule77 Messages postés 12 Statut Membre
 
C'est fait.
La voiture n'avance pas.... 


<script type="text/javascript">
function moveDiv() {

if (document.body)
{
var larg = (document.body.clientWidth);
} else
{
var larg = (window.innerWidth);
}  // récupère la largeur de la fenêtre



 var voit = document.getElementById('voiture'); // on récupère le div voiture

	pos_left = voit.style.left;
	valPX_larg_gauche = pos_left.indexOf('px', 0);
	valpos_left = pos_left.substring(0, valPX_pos_left);
	valpos_left = parseInt(valpos_left); // on viens de récupérer la valeur de la position left sans le px soit -50 
        
        larg2 = larg+86px; // remplacer x par la taille de ton image

        for (i=valpos_left; i<larg2; i++) {
            pos_left = i+'px'; // Cette boucle fait déplacer ton div en modifiant sa position par rapport à la gauche de la page. avance 1px par 1 px
        }
} 


</script>



</head>


<div id="voiture" style="position:absolute; top:10px; left:-50px;"><img src="http://www.oceanelanouet.com/IMG/IMG_TM/voiture.gif"></div>


<body onLoad="moveDiv();">
0
Réponse 16 / 19
capsule77 Messages postés 12 Statut Membre
 
ça marche! La voiture avance, MERCI et bravo !!

Est-ce possible de le jouer en boucle avec une intervalle ^_^
0
Ozimandias Messages postés 528 Statut Membre 46
 
Je vais voir
0
capsule77 Messages postés 12 Statut Membre > Ozimandias Messages postés 528 Statut Membre
 
On y est presque, je te remerci beaucoup !
0
Réponse 17 / 19
capsule77 Messages postés 12 Statut Membre
 
Yes !
Ca marche :) :) :) :)

Merci Ozimandias (et monkey_monk)

J'espère que ça servira aussi à d'autres, bonne continuation !
0
Réponse 18 / 19
capsule77 Messages postés 12 Statut Membre
 
Merci Ozimandias.

Je suis en train d'essayer.

Peux-tu juste stp me préciser où ajouter le Javascript (3.), et où insérer le code pour lancer la fonction ?
Je débute.
Il n'y a pas encore de Javascript dans ma page, je crois donc qu'il faille que je le signale dans le head non ?


D'ores et déjà merci :)
-1
Réponse 19 / 19
Ozimandias Messages postés 528 Statut Membre 46
 
Le javascript: après </HEAD> entre des balises <script type="text/javascript> .... </script>

pour le lancer à l'ouverture de la page tu met ta balise body comme ça : <body onLoad="moveDiv();">

-1

Discussions similaires

téléchargé des films de dessins animés
djaz.123 -
41611209 -

6 réponses
écran qui s'éteint mais pas le PC
tib -
Morgan -

177 réponses