Modification du JS de Raptorize-kit

Version imprimable

Bonjour,
Étant complètement novice en JS, je rencontre des problèmes avec la modification du code de raptorize-kit, ce kit qui propose de faire apparaître une image (par défaut un vélociraptor) de façon animée.

Par défaut, l'image apparaît du bas de l'écran puis défile et disparaît par la gauche. Pour ma part, je souhaiterais que l'image arrive de droite (ça j'y suis arrivé) mais qu'elle s'arrête à un point particulier de l'écran, en l'occurrence la partie droite, autrement dit qu'elle ne disparaisse pas, le but étant justement qu'elle reste en permanence au premier plan du site. Ci-joint une capture d'écran de l'endroit où l'image (Harrison Ford / Jones) devrait rester (j'ai commencé le codage du site il y a 1 jour, donc il s'agit vraiment d'une ébauche !) :

http://u.jimdo.com/www15/o/s349256f2.../std/image.jpg

Bref, j'aimerais que Jones apparaisse par la droite et reste fixe au même endroit que sur la capture d'écran ci-dessus (right: -200px).

Voici la partie du code que j'ai modifiée pour arriver à mon premier objectif. Je pense que c'est également dans cette partie-là que je dois modifier des infos pour rendre l'image définitivement statique à un point donné :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 // Movement Hilarity raptor.animate({ "top": "-25px" }, function() { $(this).animate({ "bottom" : "0" }, 100, function() { var offset = (($(this).position().left)+400); $(this).delay(300).animate({ "right" : offset }, 2200, function() { raptor = $('#elRaptor').css({ "top": "-25px", "right" : "-200px" }) locked = false; }) }); });
En espérant avoir été assez clair dans mes explications,
Merci par avance de votre aide.

Bonsoir

Exemple :

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Raptor</title>
	<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<style>
		#elRaptor {
			position : fixed;
			bottom : -700px;
			right : 0;
			display : block;
		}
	</style>
</head>
<body>
	<button id="btn1">Animation Raptor</button>
	<button id="btn2">Montrer le Raptor</button>
	<button id="btn3">Caher le Raptor</button>
	<img id="elRaptor" src="raptor.png">
	<audio id="elRaptorShriek" preload="auto" controls>
		<source src="raptor-sound.mp3">
		<source src="raptor-sound.ogg">
	</audio>
	<script>
		$( window ).load( function(){
			var musique = $( "#elRaptorShriek" ).get( 0 ),
				raptor = $( "#elRaptor" );
 
			$( "#btn3" ).prop( "disabled", true );
 
			/*
			 * Comme la version originale.
			 * Le raptor jaillit à droite, 
			 * traverse l'écran et
			 * se remet en position de départ.
			 */
			$( "#btn1" ).on( "click", function(){
				musique.load(); // pour Chrome !
				musique.play();
 
				raptor.animate( { "bottom" : "0" }, 1000, function(){
					$( this ).animate( { "bottom" : "-130px" }, 100, function(){
						var offset = ( ( $( this ).position().left ) + 400 );
 
						$( this ).delay( 300 ).animate( { "right" : offset }, 2200, function(){	
							raptor.css({
								"bottom" : "-700px",
								"right" : "0"
							});
						});
					});
				});
			});
 
			/*
			 * Version modifiée.
			 * Le raptor jaillit à droite
			 * et ne bouge plus.
			 */
			$( "#btn2" ).on( "click", function(){
				musique.load();
				musique.play();
 
				raptor.animate( { "bottom" : "0" }, 1000 );
 
				$( "#btn3" ).prop( "disabled", false );
				$( "#btn2" ).prop( "disabled", true );
			});
			/*
			 * Version modifiée.
			 * Cacher le raptor.
			 */
			$( "#btn3" ).on( "click", function(){
				musique.load();
				musique.play();
 
				raptor.animate( {
					"bottom" : "-700px",
					"right" : "0"  
				}, 1000 );
 
				$( "#btn3" ).prop( "disabled", true );
				$( "#btn2" ).prop( "disabled", false );
			});
 
		});
	</script>
</body>
</html>

08/02/2013, 14h25
Invité

Merci beaucoup de votre réponse.
Malheureusement, je ne suis pas parvenu à obtenir ce que je cherchais. En supprimant la 1re et la 3e version, et donc en ne gardant que la 2e, le raptor n'avait pour seule animation que de surgir du bas.
Je vous remercie beaucoup d'avoir créé ce code avec les boutons, le son... mais je n'en demandais pas tant :) N'est-il pas possible de faire apparaître le raptor de la droite et l'arrêter à une position fixe quelques secondes après l'ouverture de la page à partir du code que j'ai initialement fourni (sans doute une donnée à modifier ou une ligne à rajouter) ?
Merci par avance.

:calim2: Avec les exemples déjà donnés, un minimum de connaissance en jQuery et un minimum d'efforts, ce n'est pas difficile de réaliser l'animation qui vous convient !

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
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Raptor</title>
	<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<style>
		#elRaptor {
			position : fixed;
			right : -400px;
			top : 80px;
			display : block;
		}
	</style>
</head>
<body>
	<img id="elRaptor" src="raptor.png">
	<audio id="elRaptorShriek" preload="auto">
		<source src="raptor-sound.mp3">
		<source src="raptor-sound.ogg">
	</audio>
	<script>
		$( window ).load( function(){
			var musique = $( "#elRaptorShriek" ).get( 0 ),
				raptor = $( "#elRaptor" );
 
			musique.load(); // pour Chrome !
			musique.play();
 
			raptor.animate( { "right" : "0" }, 1000 );
		});
	</script>
</body>
</html>

09/02/2013, 12h18
Invité

Merci beaucoup pour votre aide tout fonctionne bien !
09/02/2013, 12h45
Invité

Juste une remarque : sauf erreur de ma part, il semble que les sons soient "bloqués". En effet, si ceux de raptor fonctionnaient, lorsque j'ai voulu les remplacer par un autre son cela ne fonctionnait pas (j'ai bien vérifié le chemin et l'extension). Est-ce normal et peut-on y remédier ?
Merci.
09/02/2013, 23h03
danielhagnoul
Hélas ! les navigateurs n'acceptent pas tous les formats de son.
```
Navigateur MP3 OGG

IE Oui Non

Chrome Oui Oui

Firefox Non Oui

Safari Oui Non

Opera Non Oui
```
09/02/2013, 23h23
Invité

D'accord merci ! Effectivement cela fonctionne avec Chrome mais pas Firefox, ce qui reste tout de même étrange de la part du navigateur français vis-à-vis d'un format aussi répandu.
Merci encore pour votre aide.
09/02/2013, 23h26
danielhagnoul

OGG est un format libre, mpX c'est payant.

Conversion : http://www.avs4you.com/fr/AVS-Audio-...FabLtAodQFgA8A
15/02/2013, 16h58
Invité
Bonjour,
News : Firefox s'est tout récemment ouvert (entre autres) au mp3 : voir ici. À noter que cela ne concerne que Windows 7 et plus. Je vous rappelle mon script pour la musique qui se lance en auto :
Code:

1 2 <embed src="jones.mp3" autostart="true" loop="false" hidden="true"></embed> <embed src="jones.ogg" autostart="true" loop="false" hidden="true"></embed>
Le problème, c'est que, depuis cette prise en charge du mp3, FF lance et le .mp3 et le .ogg, ceci avec un décalage entre les deux... bref, une horreur. Et supprimer le .ogg revient à rendre impossible la lecture de la musique sur les systèmes tels que Windows XP.
Du coup, est-il possible d'attribuer une "priorité", un script qui dirait quelque chose comme : "si tu peux le lire, lis le .mp3, sinon rabats-toi sur le .ogg" ?

Merci par avance.
15/02/2013, 22h37
danielhagnoul
Bonsoir

Firefox 22 est prévu pour le mois de juin !
On en est seulement à la version 18 !

Avec la balise HTML5 :
Code:

1 2 3 4 <audio> <source src="raptor-sound.mp3" type="audio/mpeg"> <source src="raptor-sound.ogg" type="audio/ogg"> </audio>
Il jouera automatiquement et uniquement la première source disponible.

Mais dans votre code obsolète (car non HTML5), l'option "autostart" (l'option "autoplay en HTML5) lui demande de jouer les deux sons !
16/02/2013, 10h40
Invité

D'accord merci pour ce code ça fonctionne !

Par contre, j'ai essayé sans succès de faire la même chose avec le logo du site, et avec cette fois-ci une apparition depuis le haut de la page. Le CSS du logo :
Code:

1 2 3 4 5 6 7 #logo { margin-left: auto; margin-right: auto; width: 560px; top: -250px; //il est caché au départ// z-index: 1; }
J'avais pensé adapter le code javascript que vous m'aviez proposé, ce qui donnerait :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <img id="logo" src="photos/logo.png"> <script> $(window).load(function(){ var logo = $("#logo"); if (!$.cookie('executed')) { logo.animate({"top" : "100px"}, 500); $.cookie('executed', true); } else { logo.css({"top" : "100px"}); } }); </script>
Malheureusement cela n'a pas fonctionné et je n'arrive pas à localiser mon erreur.
Merci de votre aide (une nouvelle fois ! ;))

17/02/2013, 23h17
danielhagnoul
Si vous prenez exemple sur le cas précédent, vous verrez immédiatement que votre CSS n'est pas correct.
Code:

1 2 3 4 5 6 #logo { position: fixed; left: 80px; // par exemple top: -250px; // par exemple display: block; }
17/02/2013, 23h47
Invité

Oui, j'avais déjà essayé de cette façon. Le problème c'est que mettre la position en fixed me fait perdre mes margin auto, et de ce fait le logo est rabattu par défaut sur la gauche. Je peux certes jouer sur les margin, mais il me semble que cela peut entraîner des différences d'affichage selon les tailles d'écran, contrairement au margin auto qui, je crois, laisseront toujours le logo au centre.
De plus, ce CSS couplé au script joint précédemment me créé un deuxième exemplaire du logo (qui ne s'anime d'ailleurs pas), tout comme le premier exemplaire.