-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
119 lines (114 loc) · 6.23 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/main.css">
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@900&display=swap" rel="stylesheet">
<title>Anime JS</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="./index.html">home</a></li>
<li><a href="./infopage.html">info</a></li>
</ul>
</nav>
</header>
<div class="lax" data-lax-opacity="0 1, 100 0">
<div class="fadewrap" style="animation-delay: 3s;">
<div class="top-panel"></div>
</div>
</div>
<div class="svg__wrap">
<?xml version="1.0" encoding="utf-8"?>
<svg class="glow" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 852.7 307.62" style="enable-background:new 0 0 852.7 307.62;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: none;
stroke: #F2CE1B;
stroke-width: 10;
stroke-miterlimit: 10;
stroke-linecap: round;
}
</style>
<g>
<path class="st0" d="M163.94,89.68v142.2h-49.9l-0.52-12.67c-8.79,10.08-21.46,15.25-34.39,15.25c-30.77,0-51.45-18.62-51.45-46.8
c0-28.44,25.08-47.31,62.57-47.31c6.72,0,14.22,0.78,21.98,1.81v-12.15H36.47V89.68H163.94z M112.23,176.55
c-5.43-0.78-10.6-1.29-15.25-1.29c-9.57,0-15.77,4.65-15.77,11.38c0,6.98,3.36,11.38,12.93,11.38
C104.73,198.01,111.97,190,112.23,176.55z" />
<path class="st0" d="M320.36,142.94v88.94h-51.71v-81.44c0-11.63-8.53-19.13-21.72-19.13c-13.19,0-21.72,7.5-21.72,19.13v81.44
H173.5V89.68h49.9l0.52,13.96c11.38-11.38,26.89-16.55,41.63-16.55C298.38,87.1,320.36,109.33,320.36,142.94z" />
<path class="st0" d="M325.01,49.87c0-17.06,12.41-29.47,29.47-29.47c17.06,0,29.21,12.41,29.21,29.47
c0,17.06-12.15,29.22-29.21,29.22C337.42,79.08,325.01,66.93,325.01,49.87z M328.37,89.68h51.71v142.2h-51.71V89.68z" />
<path class="st0" d="M618.2,142.94v88.94h-51.71v-81.44c0-11.63-7.24-19.13-18.36-19.13s-18.36,7.5-18.36,19.13v81.44h-51.71
v-81.44c0-11.63-7.24-19.13-18.36-19.13c-11.12,0-18.36,7.5-18.36,19.13v81.44h-51.71V89.68h49.9l0.52,12.67
c10.6-10.34,24.56-15.25,38.26-15.25c16.03,0,29.22,5.95,38.26,16.55c11.38-11.63,27.15-16.55,42.66-16.55
C594.42,87.1,618.2,109.33,618.2,142.94z" />
<path class="st0" d="M767.13,178.88h-92.56c2.33,9.57,8.02,15.25,21.2,15.25c10.08,0,18.1-3.62,23.79-9.82l40.07,19.39
c-11.63,17.84-34.64,30.77-63.08,30.77c-46.02,0-77.05-28.44-77.05-71.62c0-45.25,29.73-75.75,74.46-75.75
c44.73,0,74.46,28.44,74.46,71.36C768.42,165.43,767.9,172.93,767.13,178.88z M674.57,144.49h39.56
c-2.58-11.38-8.79-17.06-20.17-17.06C683.1,127.43,677.15,133.38,674.57,144.49z" />
<path class="st1" style="fill:#F2CE1B;" d="M765.32,202.41c0-17.58,14.48-31.8,32.06-31.8s31.8,14.22,31.8,31.8c0,17.58-14.22,32.06-31.8,32.06
S765.32,219.99,765.32,202.41z" />
</g>
</svg>
</div>
<div class="stagger-wrap">
<div class="stagger-visualizer"></div>
</div>
<?xml version="1.0" encoding="utf-8"?>
<svg class="japanese" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 208.11 600"
style="enable-background:new 0 0 208.11 600;" xml:space="preserve">
<style type="text/css">
.st2 {
fill: #F2CE1B;
stroke: none;
stroke-width: 10;
stroke-miterlimit: 10;
}
</style>
<g>
<path class="st2" d="M131.08,75.37H43.59c-0.88,0-1.8-0.35-2.75-1.04c-0.95-0.69-1.42-1.7-1.42-3.03V51.8
c0-1.33,0.47-2.33,1.42-3.03c0.95-0.69,1.86-1.04,2.75-1.04h127.35c1.2,0,1.96,0.51,2.27,1.52c0.31,1.01,0.25,1.83-0.19,2.46
l-23.58,52.55c-0.38,0.82-1.11,1.69-2.18,2.6c-1.07,0.92-2.21,1.37-3.41,1.37H120c-1.26,0-2.04-0.5-2.32-1.52
c-0.28-1.01-0.21-1.83,0.24-2.46L131.08,75.37z M79.48,121.58c0.25-0.63,0.5-1.62,0.76-2.98c0.25-1.36,0.44-2.54,0.57-3.55
l0.19-1.52V88.25c0-0.82,0.35-1.69,1.04-2.6c0.69-0.91,1.67-1.37,2.94-1.37h22.91c1.26,0,2.22,0.46,2.89,1.37
c0.66,0.92,0.99,1.78,0.99,2.6v25.28c-0.38,3.91-0.88,6.6-1.51,8.05l-20.74,47.15c-1.2,2.65-2.78,3.98-4.73,3.98H61.77
c-1.26,0-2.16-0.49-2.7-1.47c-0.54-0.98-0.65-1.81-0.33-2.51L79.48,121.58z" />
<path class="st2" d="M41.6,338.98h119.11c0.88,0,1.85,0.36,2.89,1.09c1.04,0.73,1.56,1.72,1.56,2.98v19.5
c0,1.26-0.52,2.26-1.56,2.98c-1.04,0.73-2.01,1.09-2.89,1.09H41.6c-0.88,0-1.8-0.35-2.75-1.04c-0.95-0.7-1.42-1.7-1.42-3.03v-19.5
c0-1.33,0.47-2.33,1.42-3.03C39.8,339.33,40.72,338.98,41.6,338.98z M143.68,241.64c0.88,0,1.85,0.36,2.89,1.09
c1.04,0.73,1.56,1.72,1.56,2.98v19.5c0,1.26-0.52,2.26-1.56,2.98c-1.04,0.73-2,1.09-2.89,1.09H58.65c-0.88,0-1.8-0.35-2.75-1.04
c-0.95-0.69-1.42-1.7-1.42-3.03v-19.5c0-1.33,0.47-2.33,1.42-3.03c0.95-0.69,1.86-1.04,2.75-1.04H143.68z" />
<path class="st2" d="M107.22,458c0.25-0.63,0.52-1.63,0.8-2.98c0.29-1.36,0.46-2.54,0.52-3.55l0.19-1.52v-31.44
c0-0.82,0.35-1.69,1.04-2.6c0.7-0.92,1.67-1.37,2.94-1.37h22.91c1.26,0,2.22,0.46,2.89,1.37c0.66,0.92,0.99,1.78,0.99,2.6v31.44
c-0.38,3.92-0.88,6.6-1.52,8.05l-11.46,20.55l19.03,6.82c0.06,0,0.3,0.08,0.71,0.24c0.41,0.16,0.74,0.28,0.99,0.38
c0.25,0.09,0.57,0.25,0.95,0.47c0.38,0.22,0.68,0.46,0.9,0.71c0.22,0.25,0.43,0.58,0.62,0.99c0.19,0.41,0.29,0.84,0.29,1.28v24.24
c0,1.26-0.52,2.26-1.56,2.98c-1.04,0.73-2,1.09-2.89,1.09l-34.18-12.21l-28.5,51.04c-0.06,0.06-0.13,0.13-0.19,0.19
c-1.33,2.52-2.84,3.79-4.54,3.79H55.14c-1.26,0-2.18-0.49-2.75-1.47c-0.57-0.98-0.66-1.82-0.28-2.51l33.61-60.13l-25.19-9
c-0.88,0-1.8-0.35-2.75-1.04c-0.95-0.69-1.42-1.7-1.42-3.03v-24.24c0-1.33,0.49-2.37,1.47-3.12c0.98-0.76,1.88-1.07,2.7-0.95
l40.34,14.39L107.22,458z" />
</g>
</svg>
<div class="spacer1"></div>
<div class="spacer2"></div>
<script src="./node_modules/animejs/lib/anime.min.js"></script>
<script src="./js/main.js"></script>
<script src="./js/transition.js"></script>
<script src="./node_modules/lax.js/lib/lax.min.js"></script>
<script>
window.onload = function () {
lax.setup() // init
const updateLax = () => {
lax.update(window.scrollY)
window.requestAnimationFrame(updateLax)
}
window.requestAnimationFrame(updateLax)
}
</script>
</body>
</html>