-
Notifications
You must be signed in to change notification settings - Fork 18
/
example.html
118 lines (104 loc) · 4.73 KB
/
example.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
<!DOCTYPE html>
<title>Cquence example</title>
<style>
body { padding: 0; margin: 0; font-family: "Lucida Console", Monaco, monospace; }
div { position: absolute; overflow: hidden; }
#container { border: 1px solid black; width: 298px; height: 248px; background-color: black;}
.frame { width: 300px; height: 250px; }
img { position: relative }
#frame1 { z-index: 500; left: -1000px; } /* Monk */
#frame2 { z-index: 700; left: 0px; top: -40px; opacity: 0; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); filter: alpha(opacity=0); } /* Media Monks*/
#frame3 { z-index: 300; width: 750px; left: -1000px; } /* Smoke */
#frame4 { z-index: 400; left: -1000px; } /* */
#frame5 { z-index: 600; left: 0px; } /* shader */
#frame6 { z-index: 600; left: 20px; top: 120px; opacity: 0; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); filter: alpha(opacity=0);}
#frame6 p { color: white; font-size: 20px; }
/* peeps call me */
#frame7 { z-index: 600; top: 150px; left: 20px; opacity: 0; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); filter: alpha(opacity=0);}
#frame7 p { color: white; font-size: 25px; }
/* Ramon */
#frame8 { z-index: 600; top: 130px; left: 20px; opacity: 0; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); filter: alpha(opacity=0);}
#frame8 p { color: white; font-size: 35px; }
/* rocking it */
#frame9 { z-index: 600; top: 160px; left: -300px; opacity: 0; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); filter: alpha(opacity=0);}
#frame9 p { color: white; font-size: 17px; }
#frame9 p strong { color: white; font-size: 20px; }
/* Call to action */
#frame10 { z-index: 750; bottom: -260px; left: 0px; opacity: 1; background-image: url('http://i.imgur.com/OCHWcon.png'); background-repeat: no-repeat; background-size: 100%; background-position: center; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); filter: alpha(opacity=100);}
#frame10 #cta { color: #ddd; font-weight: 900; font-size: 20px; width: 100%; background-color: #333; display: inline-block; height: 40px; transition: background-color 0.4s ease;}
#frame10 #cta:hover { background-color: #fff; transition: background-color 0.4s ease; }
#frame10 #cta #button { width: 100%; height: 26px; top: 6px; left: 5px; border-radius: 4px; z-index: 751; cursor: pointer; text-align: center
; }
#frame10 #cta p { position: absolute; left: 60px; top: -11px; z-index: 750; }
</style>
<div id='container'>
<div id='frame1' class ="frame">
<img src="http://ra-ge.net/assets/assets_mediamonks.png">
</div>
<div id='frame2' class ="frame">
<img src="http://ra-ge.net/assets/assets_mediamonks.png" style="left: -300px; top: 40px;">
</div>
<div id='frame3' class ="frame">
<img src="http://ra-ge.net/assets/assets_mediamonks.png" style="left: -602px">
</div>
<div id='frame4' class ="frame">
<img src="http://ra-ge.net/assets/assets_mediamonks.png" style="left: -600px;">
</div>
<div id='frame5' class ="frame">
<img src="http://ra-ge.net/assets/assets_mediamonks.png" style="left: -1350px;">
</div>
<div id='frame6' class ="frame">
<p>Hey there,</p>
</div>
<div id='frame7' class ="frame">
<p>People call me</p>
</div>
<div id='frame8' class ="frame">
<p>Ramon Gebben</p>
</div>
<div id='frame9' class ="frame">
<p>And this is an awesome lib </p>
</div>
<div id='frame10' class ="frame">
<div id="cta">
<div id="button">Download</div>
</div>
</div>
</div>
<br>
<script src="Cquence.js"></script>
<script>
render = Cq.combine(
Cq.sequence(
Cq.sleep( 100 ),
Cq.linear('frame3', 10000, { left: -900 }, {left: 300 })
),
Cq.sequence(
Cq.easeOut('frame1', 2000, { left: -1000 }, { left: 120 }),
Cq.easeIn('frame6', 1000, { opacity: 0 }, { opacity: 1}),
Cq.easeIn('frame7', 1000, { opacity: 0 }, { opacity: 1}),
Cq.combine(
Cq.easeIn('frame6', 1500, { opacity: 1 }, { opacity: 0}),
Cq.easeIn('frame7', 1500, { opacity: 1 }, { opacity: 0}),
Cq.easeIn('frame8', 1500, { opacity: 0 }, { opacity: 1})
),
Cq.sleep(1000),
Cq.easeIn('frame8', 1000, { opacity: 1 }, { opacity: 0}),
Cq.easeIn('frame9', 1000, { opacity: 0, left: -300 }, { opacity: 1, left: 10}),
Cq.sleep(1500),
Cq.sequence(
Cq.combine(
Cq.easeIn('frame1', 1500, { left: 120 }, { left: -620 }),
Cq.easeOut('frame9', 2000, { opacity: 1, left: 10 }, { opacity: 0, left: -300 })
),
Cq.easeIn('frame2', 1000, { opacity: 0 },{ opacity: 0
}),
Cq.easeOut('frame10', 1000, { bottom: -260 }, { bottom: 0 })
)
),
Cq.sequence(
)
);
// launch the animation
Cq.renderloop();
</script>