Modification du JS de Raptorize-kit

Invité · 07/02/2013, 18h43

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

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**danielhagnoul** · 08/02/2013, 01h18

Bonsoir

Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

Invité · 08/02/2013, 14h25

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.

**danielhagnoul** · 08/02/2013, 20h18

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

Invité · 09/02/2013, 12h18

Merci beaucoup pour votre aide tout fonctionne bien !

Invité · 09/02/2013, 12h45

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.

Modification du JS de Raptorize-kit

jQuery

Vue hybride

Discussions similaires

Partager

Partager