-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
91 lines (73 loc) · 3.06 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
<!--
Crafting an Animated Postcard With jQuery
By Sam Dunn
www.buildinternet.com
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Edwinsford Estate</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
setTimeout("animation()",300);
});
function animation(){
sun_raft();
cloud1();
cloud2();
cloud3();
$("#greetings").animate({top: '125px' }, {queue:false, duration:600, easing:'easeOutBounce'});
$("#stamp").animate({left: '595px' }, {queue:false, duration:1200, easing:'easeOutBounce'});
}
function sun_raft(){
$("#sun").animate({opacity:".7"},1000).animate({opacity:"1"},1000);
$("#raft").animate({top:"-=5px"},1000).animate({top:"+=5px"}, 1000);
$("#raftripple").animate({opacity:".1"},1000).animate({opacity:"1"},1000);
setTimeout("sun_raft()",2000);
}
function cloud1(){
$("#cloud1").animate({left:"+=2150px"},20000).animate({left:"-150px"}, 0)
setTimeout("cloud1()",200000);
}
function cloud2(){
$("#cloud2").animate({left:"+=2650px"},15000).animate({left:"-500px"}, 0)
setTimeout("cloud2()",11000);
}
function cloud3(){
$("#cloud3").animate({left:"+=2600px"},9000).animate({left:"-150px"}, 0)
setTimeout("cloud3()",22000);
}
</script>
<style type="text/css">
*{ margin:0; padding:0; }
body { text-align: center; background: #111;background-image:url('images/home-bg.jpg');background-position:center top;background-color:#021825;height:1664px; }
#wrapper{ margin:0px auto; width:100%;height:1664px; overflow:hidden; }
#content{ position:relative; width:100%; height:300px; top: -1373px; z-index:-1; }
#website-content { z-index:1;margin:0 auto;width:996px;background-image:url('images/image.png');background-position:center top;height:1664px; } }
#sun{ position:absolute; top:10px; left:30px; }
#cloud1{ position:absolute; top:277px; left: -150px; z-index:5; }
#cloud2{ position:absolute; top:40px; left: -250px; z-index:4; }
#cloud3{ position:absolute; top:1025px; left: -100px; z-index:3; }
#raft{ position:absolute; top:220px; left: 312px; z-index:20; }
#raftripple{ position:absolute; top:220px; left: 309px; z-index:19; }
#greetings{ position:absolute; top:-51px; left: 200px; z-index:21; }
#stamp{ position:absolute; top:5px; left: 801px; z-index:21; }
</style>
</head>
</head>
<body>
<div id="wrapper">
<h1>Now I am testing changes y'all</h1>
<div id="website-content"></div>
<div id="content">
<div id="cloud1"><img src="images/cloud1.png"></div>
<div id="cloud2"><img src="images/cloud2.png"></div>
<div id="cloud3"><img src="images/cloud3.png"></div>
</div>
</div>
</body>
</html>