-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
133 lines (127 loc) · 5.73 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
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WebGL Slider Interaction | Using THREEJS</title>
</head>
<body>
<main>
<div class="frame">
<h3 class="frame__logo">GL.</h3>
<button class="frame__button">Menu</button>
<p class="frame__artist">
<span>Artist — <a href="https://www.instagram.com/adxmboni/" target="_blank">Adam Rosol</a></span>
</p>
<p class="frame__credits">
<span>Wave effect inspired from — <a href="https://www.nightingale.world/" target="_blank">nightingale.world</a></span>
</p>
</div>
<div class="slider">
<div class="slider__image--wrapper">
<img class="slider__image slider__image--2" src="./src/img/modern.jpg" alt="image 01" />
<img class="slider__image slider__image--1" src="./src/img/retro.jpg" alt="image 02" />
<img class="slider__image slider__image--3" src="./src/img/metal.jpg" alt="image 03" />
<img class="slider__image slider__image--4" src="./src/img/emotion.jpg" alt="image 04" />
</div>
<div class="slider__slide-info--wrapper">
<div class="slider__silde-info slide--current">
<h2 class="slide__index" data-splitting>01</h2>
<div class="slide__text--wrapper">
<h2 class="slide__text slide__text--title" data-splitting>MODERN</h2>
<p class="slide__text slide__text--description">
In this modern world it is easy to be complex but difficult to be simple. At least try to keep your mind
simple.
</p>
</div>
</div>
<div class="slider__silde-info">
<h2 class="slide__index" data-splitting>02</h2>
<div class="slide__text--wrapper">
<h2 class="slide__text slide__text--title" data-splitting>RETRO</h2>
<p class="slide__text slide__text--description">
Your assumptions are your windows on the world. Scrub them off every once in a while, or the light won't
come in.
</p>
</div>
</div>
<div class="slider__silde-info">
<h2 class="slide__index" data-splitting>03</h2>
<div class="slide__text--wrapper">
<h2 class="slide__text slide__text--title" data-splitting>METAL</h2>
<p class="slide__text slide__text--description">
You simply have to turn your back on a culture that has gone sterile and dead and get with the program of a
living world and the imagination.
</p>
</div>
</div>
<div class="slider__silde-info">
<h2 class="slide__index" data-splitting>04</h2>
<div class="slide__text--wrapper">
<h2 class="slide__text slide__text--title" data-splitting>EMOTION</h2>
<p class="slide__text slide__text--description">
Every man has his secret sorrows which the world knows not; and often times we call a man cold when he is
only sad.
</p>
</div>
</div>
</div>
<nav class="slider__nav--wrapper">
<button class="slider__nav slider__nav--prev">
<svg>
<path
d="M 47.5547,8.05465 H 4.94603 L 10.0165,3.00878 C 10.5822,2.44568 10.5844,1.53058 10.0213,0.964816 9.45823,0.398976 8.54305,0.396881 7.97729,0.959902 L 0.425238,8.47552 c -5.06e-4,4.4e-4 -8.67e-4,9.4e-4 -0.0013,0.00138 -0.564323,0.56309 -0.566129,1.48115 -1.45e-4,2.0461 5.06e-4,5e-4 8.67e-4,10e-4 0.001301,0.0014 L 7.97714,18.04 c 0.5657,0.563 1.48087,0.561 2.04406,-0.0049 0.5631,-0.5658 0.5609,-1.4809 -0.0049,-2.044 L 4.94603,10.9453 H 47.5547 C 48.353,10.9453 49,10.2982 49,9.49996 49,8.70172 48.353,8.05465 47.5547,8.05465 Z"
fill="white"
/>
</svg>
</button>
<button class="slider__nav slider__nav--next">
<svg>
<path
d="M 1.44529,10.9454 H 44.054 l -5.0705,5.0458 c -0.5657,0.5631 -0.5679,1.4782 -0.0048,2.044 0.5631,0.5658 1.4782,0.5679 2.044,0.0049 l 7.5521,-7.5156 c 5e-4,-5e-4 8e-4,-10e-4 0.0013,-0.0014 0.5643,-0.56309 0.5661,-1.48115 1e-4,-2.04613 -5e-4,-4.3e-4 -9e-4,-9.3e-4 -0.0013,-0.00137 L 41.0229,0.959983 C 40.4572,0.397033 39.542,0.398984 38.9788,0.964896 38.4157,1.53066 38.4179,2.44576 38.9837,3.00886 L 44.054,8.05473 H 1.44528 C 0.64704,8.05473 -2.75561e-5,8.7018 -2.74863e-5,9.50004 -2.74165e-5,10.2983 0.647041,10.9454 1.44529,10.9454 Z"
fill="white"
/>
</svg>
</button>
</nav>
</div>
</main>
<svg class="cursor cursor--large" width="60" height="60" viewBox="0 0 60 60">
<circle class="cursor__inner" cx="30" cy="30" r="20" />
</svg>
<svg class="cursor cursor--small" width="60" height="60" viewBox="0 0 60 60">
<circle class="cursor__inner" cx="30" cy="30" r="5" />
</svg>
<svg class="cursor cursor--close" width="40" height="40" viewBox="0 0 512 512">
<line x1="368" y1="368" x2="144" y2="144" />
<line x1="368" y1="144" x2="144" y2="368" />
</svg>
<!-- this effect is taken from -- https://codepen.io/sandstedt/pen/GRZeywP?editors=0100 -->
<div class="loading__wrapper">
<h4 class="loading__text">
<span class="loading__text--inner">Loading...</span>
</h4>
<h1 class="text__wrapper">
<span class="text__row">
<span class="text">WELCOME</span>
</span>
<span class="text__row text__row--sibling" aria-hidden="true">
<span class="text">WELCOME</span>
</span>
<span class="text__row text__row--sibling" aria-hidden="true">
<span class="text">WELCOME</span>
</span>
<span class="text__row text__row--sibling" aria-hidden="true">
<span class="text">WELCOME</span>
</span>
<span class="text__row text__row--sibling" aria-hidden="true">
<span class="text">WELCOME</span>
</span>
<span class="text__row text__row--sibling" aria-hidden="true">
<span class="text">WELCOME</span>
</span>
</h1>
<div class="bg__transition--slide"></div>
</div>
</body>
</html>