-
Notifications
You must be signed in to change notification settings - Fork 0
/
old-days.html
146 lines (137 loc) · 5.68 KB
/
old-days.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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BACK IN THE DAYS | Han Li</title>
<link rel='shortcut icon' type='image/png' href='images/favicon.png'/>
<script type='text/javascript' src="addons/p5.min.js"></script>
<script type='text/javascript' src="addons/p5.dom.min.js"></script>
<script type='text/javascript' src="js/sketch-old-days.js"></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script type='text/javascript' src='addons/jquery.mousewheel.min.js'></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/style-old-days.css">
<link rel="stylesheet" type="text/css" href="css/style-work.css">
<script type='text/javascript'>
window.onload = function () {
document.getElementById("loading").style.right = "120%";
document.getElementById("loading").style.opacity = "0";
}
$(document).ready(function () {
$('html, body, *').mousewheel(function (e) {
// console.log(e.deltaX, e.deltaY, e.deltaFactor);
this.scrollLeft += (e.deltaX - e.deltaY)*e.deltaFactor;
// this.scrollTop = 0;
if (e && e.preventDefault) {
e.preventDefault();
} else {
window.event.returnValue = false; //IE
}
});
});
document.addEventListener("WeixinJSBridgeReady", function () {
video.play();
video.pause();
}, false)
</script>
</head>
<body>
<div id="loading">
<svg width="70" height="70" viewbox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="loading-svg" d="M26 21V41L36 43V23V32.5L46 35V25V47" stroke="#2C7632" stroke-width="4"/>
</svg>
</div>
<div id="home" onclick="location.href='index.html';">
<svg width="70" height="70" viewbox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect class="svg-bg" width="70" height="70" fill="white"/>
<path class="svg-home" d="M46 45H24L24 30.4093L35.3667 21L46 30.4093V47" stroke="white" stroke-width="4"/>
<path class="svg-lh" d="M26 21V41L36 43V23V32.5L46 35V25V47" stroke="#2C7632" stroke-width="4"/>
</svg>
</div>
<div class="wrapper">
<section class="openning">
<h1 class="font-section-title">BACK IN THE DAYS</h1>
<div id="sketch"></div>
</section>
<section class="showcase">
<div class="showcase-wrapper">
<div class="phone bg-dark">
<div class="cover dark"></div>
<video autoplay="autoplay" loop="loop" muted="muted" preload="auto" webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" x-webkit-airplay="allow">
<source src="images/olddays/faded.mp4" type="video/mp4"/>
YOU BROWSER DOESN'T SUPPORT VIDEO.
</video>
</div>
<div class="phone bg-dark">
<div class="cover dark"></div>
<video autoplay="autoplay" loop="loop" muted="muted" preload="auto" webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" x-webkit-airplay="allow">
<source src="images/olddays/faded3.mp4" type="video/mp4"/>
YOU BROWSER DOESN'T SUPPORT VIDEO.
</video>
</div>
</div>
</section>
<section class="showcase">
<div class="cube cube-main">
<img src="images/olddays/07.jpg">
</div>
<div class="cube cube-nor">
<img src="images/olddays/05.jpg">
</div>
</section>
<section class="showcase">
<div class="showcase-wrapper">
<div class="phone bg-light">
<div class="cover light"></div>
<img src="images/olddays/10.jpg">
</div>
<div class="phone bg-light">
<div class="cover light"></div>
<img src="images/olddays/11.jpg">
</div>
<div class="phone bg-light">
<div class="cover light"></div>
<img src="images/olddays/12.jpg">
</div>
</section>
<section class="showcase">
<div class="cube cube-main">
<img src="images/olddays/02.jpg">
</div>
<div class="cube cube-nor">
<img src="images/olddays/01.jpg">
</div>
<div class="cube cube-nor">
<img src="images/olddays/03.jpg">
</div>
</section>
<section class="showcase">
<div class="showcase-wrapper">
<img src="images/olddays/06.jpg">
</div>
</section>
<section class="showcase">
<div class="showcase-wrapper">
<div class="phone bg-light">
<div class="cover light"></div>
<video autoplay="autoplay" loop="loop" muted="muted" preload="auto" webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" x-webkit-airplay="allow">
<source src="images/olddays/task.mp4" type="video/mp4"/>
YOU BROWSER DOESN'T SUPPORT VIDEO.
</video>
</div>
</section>
<section class="ending next" onclick="location.href='index.html#contact';">
<div class="button">
<div class="arrow"></div>
<div class="line"></div>
</div>
<div class="title">
<span class="font-section-desc">AND THAT'S THE END!</span>
<h1 class="font-section-title">CONTACT ME</h1>
</div>
</section>
</section>
</div>
</body>
</html>