This repository has been archived by the owner on Sep 30, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 75
/
Copy pathindex.html
120 lines (92 loc) · 4.5 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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>HD Parallax</title>
<!-- Practical proven viewport for better mobile experience -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<link type="text/css" rel="stylesheet" href="static/css/parallax.css">
<link type="text/css" rel="stylesheet" href="static/css/sample.css">
</head>
<body class='unloaded'>
<img class="loadBackground" src="static/img/bck.png">
<div class='preloaderCont'>
<span class='ending'><img src="static/img/logo/classic.svg" /></span><span class='starting'><img src="static/img/logo/preload.svg" /></span>
</div>
<div id="parallax">
<img alt=".1" class="parallaxBackground" src="static/img/bck.png">
<div id="hi">
<div class='popularResolution para-totalCenterAlign'>
<div class='story'>
<div class="padded"><h1>Hi!</h1> That’s a parallax engine. Navigate by pressing keyboard arrows or rotating mouse wheel →</div>
</div></div>
</div>
<div id="simple">
<div class='popularResolution para-totalCenterAlign'>
<!-- You can create much simpler and fully working layers than that, but nested structure gives you more flexibilty. -->
<div class='fastLayer' style='left: 200px;
top: 30px;'><div alt='2'><div style='width:300px;height:300px;background: rgba(255, 255, 255, 0.25);'></div></div></div>
<div class='fastLayer' style='left: 750px;
top: 200px;'><div alt='5'><div style='width:300px;height:300px;background: rgba(255, 255, 255, 0.4);'></div></div></div>
<div class='fastLayer' style='left: 530px;
top: 450px;'><div alt='1.1'><div style='width:300px;height:300px;background: rgba(255, 255, 255, 0.5);'></div></div></div>
<div class='story'>
<div class="padded">It moves layers you place in your page with different speed.</div>
</div></div>
</div>
<div id="more">
<div class='popularResolution para-totalCenterAlign'>
<div class='story'>
<div class="padded">How about tons of layers?</div>
</div></div>
</div>
<div id="animated">
<div class='popularResolution para-totalCenterAlign'>
<div class='story'>
<div class="padded">Animated? Why not!</div>
</div></div>
</div>
<div id="optimization">
<div class='popularResolution para-totalCenterAlign'>
<div class='fastLayer' style='left: 534px;
top: 0px;'><div alt='2'><div style='width:300px;height:300px;background: rgba(255, 255, 255, 0.47);'></div></div></div>
<div class='story'>
<div class="padded"><p>It is highly optimized. Slides not visible at the moment are fully suspended for you automatically.</p><p>Want to increase performance even more? Engine lets you stop any animations in slides while you are scrolling.</p>
</div>
</div></div>
</div>
<div id="scaling" class='para-totalCenterAlign'><div class='story'>
<div class="padded">If you want, everything on your slide will scale to fit the window.
<span class="hint">experiment with the size of the window to see the magic</span>
</div>
</div></div>
<div id="layouts">
<div class='popularResolution para-totalCenterAlign'>
<div class='story'>
<div class="padded">
We provide you <i>Alternative Layouts</i> API for top-notch webpage execution.
<span class="hint">resize window so the browser’s orientation will change</span>
<div class='landscapeOnly' >You're viewing album ▭ version of the slide.</div>
<div class='portraitOnly' >You're viewing portrait ▯ version of the slide.</div>
</div>
</div></div>
</div>
</div>
<div id="footer">
Made in <a target="_blank" href="http://hotdot.pro/">Hot Dot</a> by Fyodor Ananiev.
</div>
<div style='display:none'>
Placed here just to make the preloader busy.
<img src="http://hotdot.pro/static/img/lp/ipad/5.png" />
<img src="http://hotdot.pro/static/img/mainPage/intro/2.png" />
<img src="http://hotdot.pro/static/img/cryingCyan.png" />
</div>
<!-- TODO: Describe which functions of .custom JS-files are needed -->
<script type="text/javascript" src="static/js/third_party/jquery.js"></script>
<script type="text/javascript" src="static/js/third_party/jquery.mousewheel.js"></script>
<script type="text/javascript" src="static/js/third_party/jquery.custom.js"></script>
<script type="text/javascript" src="static/js/third_party/modernizr.custom.js"></script>
<script type="text/javascript" src="static/js/parallax.js"></script>
<script type="text/javascript" src="static/js/sample.js"></script>
</body>
</html>