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
| <html>
<head>
<style>
#BG{
position:absolute;
/*background-size:contain;*/
top:-1px;
left:-1px;
width:322px;
height:482px;
opacity:.5;
z-index:1;
-webkit-transform-style: preserve-3d;
-webkit-animation-name:BGsize;
-webkit-animation-duration:2s;
-webkit-animation-direction:normal;
-webkit-animation-iteration-count:1;
}
.BG{
position:relative;
-webkit-transform-style: preserve-3d;
-webkit-animation-name:BGsize;
-webkit-animation-duration:2s;
-webkit-animation-direction:normal;
-webkit-animation-iteration-count:1;
}
@-webkit-keyframes fadeIn{
from{opacity:0;}
to{opacity:1;}
}
@-webkit-keyframes BGsize{
0%{opacity:0;-webkit-transform:scale(0,0);}
1%{opacity:0.1;-webkit-transform:perspective(600) rotateY(-90deg) rotateZ(-120deg);}
80%{opacity:0.8;-webkit-transform:scale(1.1,1.1);}
100%{opacity:1;-webkit-transform:scale(1,1);}
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi?key=VOTRE_CLE"></script>
<script type="text/javascript">google.load("jquery", "1.7");</script>
<script type="text/javascript" charset="utf-8">
//////////------------------Config Wallpaper-----------------------///////////////////
var meteoDelay = 5000;//delai en ms (5000 = 5s) avant disparition météo
// Table des walls | Mettre ici le chemin des images de fond.
var a = new Array(["images/img1.jpg"],["images/img2.jpg"],["images/img3.jpg"],["images/img4.jpg"]);
//////////------------------Fin Config Wallpaper-----------------------///////////////////
$(document).ready(function () {
$("#weather").hide();
$("#BG").hide();
$("#Forecast").hide();
var d = new String;
var e = a.length + 1 ;
var i = 0;
var cssObj = {
'-webkit-animation-name' : 'BGsize',
'-webkit-animation-duration' : '2s',
'-webkit-transform-style' : 'preserve-3d',
'-webkit-animation-direction' : 'normal',
'-webkit-animation-iteration-count' : '1'
}
$('#Button').click(function () {
if ($("#weather").show = true) {
$("#Forecast").show(1500)
} else {
$("#Forecast").hide()
}
$("#weather").toggle("slow");
$("#Forecast").delay(meteoDelay).fadeToggle("slow");
$("#weather").delay(meteoDelay).fadeToggle("slow");
});
$('#DayUpdate').bind({click:function () {
d = a[i];
$('#BG').fadeOut( 1000, function(){
$(this).css( 'background-image', 'url("' + d + '")', 'opacity','0.5', cssObj).fadeTo(1000,1);
});
i++;
//var h = $('#BG').css('background-image', 'url(' + d + ')').fadeToggle(2000);
if (i > e) {$("#BG").hide();i = 0};
}
});
});
(jQuery);
</script>
</head>
<body>
<div style="float : right;">
<input id="Button" type="button" value="Click me !"/>
<input id="DayUpdate" type="button" value="Click me !"/>
</div>
<div style=" clear : both;"></div>
<div id="BG"></div>
<div id="weather">
<img id="meteoverlay" src="images/img1.jpg" />
<div id="WeatherContainer">
<div id="temp"class="myfont2">9°</div> <img id="weatherIcon" src=" " />
<div id="TextContainer">
<div id="HiLo"><span id="temptxt">Températures</span><span id="hi">Max: 10°</span><br /><span id="lo">Min: 4°</span></div>
<div id="desc" class="myfont">passages Nuageux</div>
<div id="city">Paris</div>
</div>
</div>
<div id="Forecast">
</div>
</body>
</html> |
animation webkit ne passe pas sous safari.
Répondre avec citation
Partager