-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
132 lines (123 loc) · 5.05 KB
/
index.html
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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="fr">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<meta charset="utf-8">
<title>méduse</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
#image {
transition:All 3s ease-in-out;
-webkit-transition:All 3s ease-in-out;
-moz-transition:All 3s ease-in-out;
-o-transition:All 3s ease-in-out;
transform-origin: bottom left;
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-o-transform-origin: bottom left;
position:absolute;
margin:0;
width:25%;
height:50%;
top:25%;
left:37.5%;
}
#espace {
transition:All 210s linear;
-webkit-transition:All 210s linear;
-moz-transition:All 210s linear;
-o-transition:All 210s linear;
position:absolute;
margin:0;
width:100%;
height:10000px;
top:-3500px;
left:0%;
}
.meduse {
position:absolute;
margin:0;
}
body{
overflow:hidden;
}
</style>
</head>
<body>
<audio id="meduseson" autoplay preload><source src="science.mp3" type="audio/mpeg"><source src="science.ogg" type="audio/ogg"></audio>
<div id="espace">
<img class="meduse" id="fondespace" style="width:100%;height:100%:top:0px;left:0px" src="espace.jpg">
</div>
<div id="image">
<img class="meduse" id="fond" style="width:100%;height:100%:top:0%;left:0%" src="meduse.jpg">
</div>
<script type="text/javascript">
bouge();
var sens = 1;
var duree = 1000;
var compt = 0;
var espace_sens = 1;
function espace_bouge() {
if (espace_sens) {
document.getElementById("espace").style.top="0px";
espace_sens = 0;
} else {
document.getElementById("espace").style.top="-3500px";
espace_sens = 1;
}
}
setTimeout(espace_bouge, 1000);
setInterval(espace_bouge, 210000);
function bouge(){
setTimeout(function() {
if(sens==0){
// document.getElementById('image').style.left = "5%";
document.getElementById("image").style.transformOrigin="bottom left";
document.getElementById("image").style.webkitTransformOrigin="bottom left";
document.getElementById("image").style.mozTransformOrigin="bottom left";
document.getElementById("image").style.msTransforOrigin="bottom left";
document.getElementById("image").style.otransformOrigin="bottom left";
document.getElementById("image").style.transition="0.5s ease-in-out";
document.getElementById("image").style.webkitTransition="0.5s ease-in-out";
document.getElementById("image").style.mozTransition="0.5s ease-in-out";
document.getElementById("image").style.msTransition="0.5s ease-in-out";
document.getElementById("image").style.otransition="0.5s ease-in-out";
document.getElementById("image").style.transform="scale(1,1.5)";
document.getElementById("image").style.webkitTransform="scale(1,1.5)";
document.getElementById("image").style.mozTransform="scale(1,1.5)";
document.getElementById("image").style.msTransform="scale(1,1.5)";
document.getElementById("image").style.oTransform="scale(1,1.5)";
sens = 1;
duree = 600;
} else {
// document.getElementByIimageage').style.left = "0%";
document.getElementById("image").style.transformOrigin="top left";
document.getElementById("image").style.webkitTransformOrigin="top left";
document.getElementById("image").style.mozTransformOrigin="top left";
document.getElementById("image").style.msTransforOrigin="top left";
document.getElementById("image").style.otransformOrigin="top left";
document.getElementById("image").style.transition="2s ease-in-out";
document.getElementById("image").style.webkitTransition="2s ease-in-out";
document.getElementById("image").style.mozTransition="2s ease-in-out";
document.getElementById("image").style.msTransition="2s ease-in-out";
document.getElementById("image").style.otransition="2s ease-in-out";
document.getElementById("image").style.transform="scale(1,1)";
document.getElementById("image").style.webkitTransform="scale(1,1)";
document.getElementById("image").style.mozTransform="scale(1,1)";
document.getElementById("image").style.msTransform="scale(1,1)";
document.getElementById("image").style.oTransform="scale(1,1)";
compt = document.getElementById('meduseson').currenTime;
console.log(compt);
if(compt==20){
document.getElementById("image").style.top="-500px";
}
compt++;
sens = 0;
duree = 2000;
}
bouge();
}, duree);
}
</script>
</body>
</html>