Un gif animé qui traverse l'écran

Résolu/Fermé

capsule77 Messages postés 12 Date d'inscription lundi 17 août 2009 Statut Membre Dernière intervention 20 août 2009 - 17 août 2009 à 21:02
capsule77 Messages postés 12 Date d'inscription lundi 17 août 2009 Statut Membre Dernière intervention 20 août 2009 - 20 août 2009 à 13:57

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:

Un gif animé qui traverse l'écran
Double ecran - Guide
Capture d'écran whatsapp - Accueil - Messagerie instantanée
Capture d'écran samsung - Guide
Gif animé gratuit - Guide
Retourner ecran windows - Guide

19 réponses

Réponse 1 / 19

Ozimandias Messages postés 502 Date d'inscription jeudi 14 mai 2009 Statut Membre Dernière intervention 10 mars 2010 46
20 août 2009 à 09:02

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

Réponse 2 / 19

Ozimandias Messages postés 502 Date d'inscription jeudi 14 mai 2009 Statut Membre Dernière intervention 10 mars 2010 46
19 août 2009 à 11:59

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>

Réponse 3 / 19

Ozimandias Messages postés 502 Date d'inscription jeudi 14 mai 2009 Statut Membre Dernière intervention 10 mars 2010 46
18 août 2009 à 10:11

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

Réponse 4 / 19

capsule77 Messages postés 12 Date d'inscription lundi 17 août 2009 Statut Membre Dernière intervention 20 août 2009
18 août 2009 à 15:03

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

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

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

Posez votre question

Réponse 5 / 19

monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 130
18 août 2009 à 15:11

Il ne peut rien y avoir entre </head> et <body>...
Place tout juste avant le </head> et ça devrait fonctionner !

Réponse 6 / 19

capsule77 Messages postés 12 Date d'inscription lundi 17 août 2009 Statut Membre Dernière intervention 20 août 2009
18 août 2009 à 15:27

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 :)

Réponse 7 / 19

Ozimandias Messages postés 502 Date d'inscription jeudi 14 mai 2009 Statut Membre Dernière intervention 10 mars 2010 46
18 août 2009 à 15:33

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

Réponse 8 / 19

monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 130
18 août 2009 à 15:44

Oh ! Je l'ignorais... mais ne le ferais quand même jamais ! :D

Réponse 9 / 19

capsule77 Messages postés 12 Date d'inscription lundi 17 août 2009 Statut Membre Dernière intervention 20 août 2009
18 août 2009 à 16:36

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

Réponse 10 / 19

monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 130
18 août 2009 à 16:42

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 ?

capsule77 Messages postés 12 Date d'inscription lundi 17 août 2009 Statut Membre Dernière intervention 20 août 2009
18 août 2009 à 17:13

OK j'ai essayé z-index, mais la bande reste (cf. l'ensemble du code 2 postes plus bas en réponse à Ozimandias).

Réponse 11 / 19

Ozimandias Messages postés 502 Date d'inscription jeudi 14 mai 2009 Statut Membre Dernière intervention 10 mars 2010 46
18 août 2009 à 16:42

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();">

capsule77 Messages postés 12 Date d'inscription lundi 17 août 2009 Statut Membre Dernière intervention 20 août 2009
18 août 2009 à 16:53

OK j'ai sorti la <div> avec la voiture du body (dans l'ordre que tu m'indique), mais elle n'avance toujours pas...

Réponse 12 / 19

Ozimandias Messages postés 502 Date d'inscription jeudi 14 mai 2009 Statut Membre Dernière intervention 10 mars 2010 46
18 août 2009 à 16:56

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';

Réponse 13 / 19

capsule77 Messages postés 12 Date d'inscription lundi 17 août 2009 Statut Membre Dernière intervention 20 août 2009
18 août 2009 à 17:18

(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

Réponse 14 / 19

Ozimandias Messages postés 502 Date d'inscription jeudi 14 mai 2009 Statut Membre Dernière intervention 10 mars 2010 46
19 août 2009 à 09:35

Le javascript n'accède pas à la feuille de style externe, ajoute le style enligne dans ta balise.

Réponse 15 / 19

capsule77 Messages postés 12 Date d'inscription lundi 17 août 2009 Statut Membre Dernière intervention 20 août 2009
19 août 2009 à 11:22

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();">

Réponse 16 / 19

capsule77 Messages postés 12 Date d'inscription lundi 17 août 2009 Statut Membre Dernière intervention 20 août 2009
19 août 2009 à 14:18

ça marche! La voiture avance, MERCI et bravo !!

Est-ce possible de le jouer en boucle avec une intervalle ^_^

Ozimandias Messages postés 502 Date d'inscription jeudi 14 mai 2009 Statut Membre Dernière intervention 10 mars 2010 46
19 août 2009 à 15:53

Je vais voir

capsule77 Messages postés 12 Date d'inscription lundi 17 août 2009 Statut Membre Dernière intervention 20 août 2009 > Ozimandias Messages postés 502 Date d'inscription jeudi 14 mai 2009 Statut Membre Dernière intervention 10 mars 2010
19 août 2009 à 19:10

On y est presque, je te remerci beaucoup !

Réponse 17 / 19

capsule77 Messages postés 12 Date d'inscription lundi 17 août 2009 Statut Membre Dernière intervention 20 août 2009
20 août 2009 à 13:57

Yes !
Ca marche :) :) :) :)

Merci Ozimandias (et monkey_monk)

J'espère que ça servira aussi à d'autres, bonne continuation !

Réponse 18 / 19

capsule77 Messages postés 12 Date d'inscription lundi 17 août 2009 Statut Membre Dernière intervention 20 août 2009
18 août 2009 à 14:31

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 :)

Réponse 19 / 19

Ozimandias Messages postés 502 Date d'inscription jeudi 14 mai 2009 Statut Membre Dernière intervention 10 mars 2010 46
18 août 2009 à 14:38

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();">

Discussions similaires

Téléchargements gratuits de film et dessin a.

téléchargé des films de dessins animés

Écran qui se décolle