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> |
Modification du JS de Raptorize-kit
Répondre avec citation
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) ?
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 !
)
Partager