-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
400 lines (394 loc) · 15.2 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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
<!doctype html>
<html lang="en" id="html">
<head>
<title>Realvwr scroll</title>
<!-- Metas -->
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
/>
<meta
name="description"
content="Explore 3D jewelry on our website. Immerse yourself in the stunning presentation of this exquisite ring model."
/>
<meta
name="keywords"
content="realvwr, realvwr scroll, WEBGI, 3D website, jewelry"
/>
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Realvwr scroll" />
<meta
property="og:description"
content="Explore 3D jewelry on our website. Immerse yourself in the stunning presentation of this exquisite ring model."
/>
<meta property="og:url" content="https://www.scroll.realvwr.com" />
<meta property="og:site_name" content="Realvwr Scroll" />
<meta
property="og:image"
content="https://i.postimg.cc/jqWX7J5m/Screenshot-2023-05-24-at-0-34-11.png"
/>
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="800" />
<meta property="og:image:type" content="image/png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content="@realvwr" />
<meta name="twitter:site" content="@realvwr" />
<meta
name="twitter:image"
content="https://i.postimg.cc/jqWX7J5m/Screenshot-2023-05-24-at-0-34-11.png"
/>
<!-- FONTS -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Archivo:wght@100&family=Playfair+Display+SC&family=Qwitcher+Grypen&display=swap"
rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Archivo:wght@100&family=Qwitcher+Grypen&display=swap"
rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Archivo:wght@100&display=swap"
rel="stylesheet"
/>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- Links -->
<link rel="stylesheet" href="src/styles.css" />
<link rel="stylesheet" href="src/animations.css" />
<link
rel="icon"
type="image/x-icon"
href="https://www.realvwr.com/wp-content/uploads/2021/08/cropped-favicon-realvwr-32x32.jpeg"
sizes="32x32"
/>
<link
rel="apple-touch-icon"
type="image/x-icon"
href="https://www.realvwr.com/wp-content/uploads/2021/08/cropped-favicon-realvwr-180x180.jpeg"
/>
<script>
function scrollToTop() {
$('html, body').animate(
{
scrollTop: $('#body').offset().top,
},
50,
);
}
</script>
</head>
<body id="body" onload="scrollToTop()">
<div class="loader">
<svg
width="48"
height="48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<mask
id="a"
style="mask-type: alpha"
maskUnits="userSpaceOnUse"
x="9"
y="3"
width="32"
height="42"
>
<path
d="M25 44a15 15 0 1 0 0-30 15 15 0 0 0 0 30Z"
stroke="#fff"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="m18 8 3-4h8l3 4-7 6-7-6Z"
fill="#555"
stroke="#fff"
stroke-linecap="round"
stroke-linejoin="round"
/>
</mask>
<g mask="url(#a)">
<path d="M0 0h48v48H0V0Z" fill="#52322B" />
</g>
</svg>
<p>Loading... Please wait</p>
<div class="progress"></div>
</div>
<section class="header">
<nav class="navbar-nav">
<h1 class="header-brand">
<a href="https://realvwr.com"
><img
src="/assets/images/realvwr.webp"
alt="realvwr logo"
/><br />www.realvwr.com</a
>
</h1>
<ul class="header-menu">
<button
id="ExitButton"
class="btn-exit btn-exit-customize scale-up-center"
>
EXIT
</button>
<!-- <li class="music-control">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 5L6 9H2V15H6L11 19V5Z" stroke="#52322B" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M19.07 4.92999C20.9447 6.80527 21.9979 9.34835 21.9979 12C21.9979 14.6516 20.9447 17.1947 19.07 19.07M15.54 8.45999C16.4774 9.39763 17.004 10.6692 17.004 11.995C17.004 13.3208 16.4774 14.5924 15.54 15.53" stroke="#52322B" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</li> -->
<!-- <li class="dark-mode">
<svg width="24" height="24" viewBox="0 0 24 24" fill="non" xmlns="http://www.w3.org/2000/svg">
<path d="M20.9999 12.79C20.8426 14.4922 20.2038 16.1144 19.1581 17.4668C18.1125 18.8192 16.7034 19.8458 15.0956 20.4265C13.4878 21.0073 11.7479 21.1181 10.0794 20.7461C8.41092 20.3741 6.8829 19.5345 5.67413 18.3258C4.46536 17.117 3.62584 15.589 3.25381 13.9205C2.88178 12.252 2.99262 10.5121 3.57336 8.9043C4.15411 7.29651 5.18073 5.88737 6.53311 4.84175C7.8855 3.79614 9.5077 3.15731 11.2099 3C10.2133 4.34827 9.73375 6.00945 9.85843 7.68141C9.98312 9.35338 10.7038 10.9251 11.8893 12.1106C13.0748 13.2961 14.6465 14.0168 16.3185 14.1415C17.9905 14.2662 19.6516 13.7866 20.9999 12.79V12.79Z" stroke="#52322B" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</li> -->
</ul>
</nav>
</section>
<div class="container-hide">
<section id="view1" class="section one">
<div
class="section-1-container"
style="transform: translate(0%, 0px); opacity: 1"
>
<div class="section-1-content">
<h1>Unique<br />Jewelry</h1>
<div class="section-1-text">
<p>
Customize your unique ring with graphic angles
and pure lines that combine to create the pure
beauty of the collection.
</p>
<button tabindex="-1" class="button button-scroll">
<a href="#">Start now</a>
<svg
width="46"
height="46"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M23 42.2a19.2 19.2 0 1 0 0-38.4 19.2 19.2 0 0 0 0 38.4Z"
stroke="#52322B"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<path
d="m15.3 23 7.7 7.7 7.7-7.7M23 15.3v15.4"
stroke="#52322B"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
</button>
</div>
</div>
</div>
</section>
<section id="view2" class="section two">
<div
class="section-2-container"
style="transform: translate3d(0%, 0px, 0px); opacity: 1"
>
<div class="section-2-text-bg" style="opacity: 0.1">
Forever
</div>
<div class="section-2-content">
<div class="section-2-title">
<h2>created to last</h2>
<h1>For<br />ever</h1>
</div>
<p>
Customize your unique ring with graphic angles and
pure lines that combine to create the pure beauty of
the collection.
</p>
</div>
</div>
</section>
<section
id="view3"
class="section three"
style="pointer-events: all"
>
<div class="section-3-container scale-up-center">
<div class="section-3-text-bg" style="opacity: 0.0926">
Emotions
</div>
<div
class="section-3-content"
style="
transform: translate3d(0%, 9.5876%, 0px);
opacity: 0.9262;
"
>
<div class="section-3-text">
<h2>share your</h2>
<h1 class="">Emotions</h1>
</div>
<div class="section-3-text-and-button">
<p>
Colorful gemstones from aquamarine, amethyst,
tourmaline to diamonds come together in white
gold on this luxury ring.
</p>
<button
tabindex="-1"
class="btn-customize"
>
Customize it
<svg
width="24"
height="25"
viewBox="0 0 24 25"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_254_236)">
<path
d="M12 15.1511C13.6569 15.1511 15 13.808 15 12.1511C15 10.4943 13.6569 9.15112 12 9.15112C10.3431 9.15112 9 10.4943 9 12.1511C9 13.808 10.3431 15.1511 12 15.1511Z"
stroke="#52322B"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<path
d="M19.4 15.1511C19.2669 15.4527 19.2272 15.7873 19.286 16.1117C19.3448 16.4361 19.4995 16.7354 19.73 16.9711L19.79 17.0311C19.976 17.2169 20.1235 17.4374 20.2241 17.6802C20.3248 17.923 20.3766 18.1833 20.3766 18.4461C20.3766 18.709 20.3248 18.9692 20.2241
19.212C20.1235 19.4548 19.976 19.6754 19.79 19.8611C19.6043 20.0471 19.3837 20.1946 19.1409 20.2952C18.8981 20.3959 18.6378 20.4477 18.375 20.4477C18.1122 20.4477 17.8519 20.3959 17.6091 20.2952C17.3663 20.1946 17.1457 20.0471 16.96 19.8611L16.9 19.8011C16.6643
19.5706 16.365 19.4159 16.0406 19.3571C15.7162 19.2983 15.3816 19.338 15.08 19.4711C14.7842 19.5979 14.532 19.8084 14.3543 20.0767C14.1766 20.3449 14.0813 20.6593 14.08 20.9811V21.1511C14.08 21.6816 13.8693 22.1903 13.4942 22.5653C13.1191 22.9404 12.6104 23.1511 12.08 23.1511C11.5496
23.1511 11.0409 22.9404 10.6658 22.5653C10.2907 22.1903 10.08 21.6816 10.08 21.1511V21.0611C10.0723 20.7301 9.96512 20.4091 9.77251 20.1398C9.5799 19.8705 9.31074 19.6654 9 19.5511C8.69838 19.418 8.36381 19.3783 8.03941 19.4371C7.71502 19.4959 7.41568 19.6506 7.18 19.8811L7.12 19.9411C6.93425
20.1271 6.71368 20.2746 6.47088 20.3752C6.22808 20.4759 5.96783 20.5277 5.705 20.5277C5.44217 20.5277 5.18192 20.4759 4.93912 20.3752C4.69632 20.2746 4.47575 20.1271 4.29 19.9411C4.10405 19.7554 3.95653 19.5348 3.85588 19.292C3.75523 19.0492 3.70343 18.789 3.70343 18.5261C3.70343 18.2633 3.75523
18.003 3.85588 17.7602C3.95653 17.5174 4.10405 17.2969 4.29 17.1111L4.35 17.0511C4.58054 16.8154 4.73519 16.5161 4.794 16.1917C4.85282 15.8673 4.81312 15.5327 4.68 15.2311C4.55324 14.9354 4.34276 14.6831 4.07447 14.5054C3.80618 14.3278 3.49179 14.2324 3.17 14.2311H3C2.46957 14.2311 1.96086 14.0204 1.58579
13.6453C1.21071 13.2703 1 12.7616 1 12.2311C1 11.7007 1.21071 11.192 1.58579 10.8169C1.96086 10.4418 2.46957 10.2311 3 10.2311H3.09C3.42099 10.2234 3.742 10.1162 4.0113 9.92363C4.28059 9.73103 4.48572 9.46186 4.6 9.15112C4.73312 8.84951 4.77282 8.51493 4.714 8.19053C4.65519 7.86614 4.50054 7.5668 4.27 7.33112L4.21
7.27112C4.02405 7.08538 3.87653 6.8648 3.77588 6.622C3.67523 6.37921 3.62343 6.11895 3.62343 5.85612C3.62343 5.59329 3.67523 5.33304 3.77588 5.09024C3.87653 4.84745 4.02405 4.62687 4.21 4.44112C4.39575 4.25517 4.61632 4.10765 4.85912 4.007C5.10192 3.90635 5.36217 3.85455 5.625 3.85455C5.88783 3.85455 6.14808 3.90635 6.39088
4.007C6.63368 4.10765 6.85425 4.25517 7.04 4.44112L7.1 4.50112C7.33568 4.73166 7.63502 4.88631 7.95941 4.94513C8.28381 5.00395 8.61838 4.96424 8.92 4.83112H9C9.29577 4.70436 9.54802 4.49388 9.72569 4.22559C9.90337 3.9573 9.99872 3.64291 10 3.32112V3.15112C10 2.62069 10.2107 2.11198 10.5858 1.73691C10.9609 1.36184 11.4696 1.15112
12 1.15112C12.5304 1.15112 13.0391 1.36184 13.4142 1.73691C13.7893 2.11198 14 2.62069 14 3.15112V3.24112C14.0013 3.56291 14.0966 3.8773 14.2743 4.14559C14.452 4.41388 14.7042 4.62436 15 4.75112C15.3016 4.88424 15.6362 4.92395 15.9606 4.86513C16.285 4.80631 16.5843 4.65166 16.82 4.42112L16.88 4.36112C17.0657 4.17517 17.2863 4.02765 17.5291 3.927C17.7719 3.82636
18.0322 3.77455 18.295 3.77455C18.5578 3.77455 18.8181 3.82636 19.0609 3.927C19.3037 4.02765 19.5243 4.17517 19.71 4.36112C19.896 4.54687 20.0435 4.76745 20.1441 5.01024C20.2448 5.25304 20.2966 5.51329 20.2966 5.77612C20.2966 6.03895 20.2448 6.29921 20.1441 6.542C20.0435 6.7848 19.896 7.00538 19.71 7.19112L19.65
7.25112C19.4195 7.4868 19.2648 7.78614 19.206 8.11053C19.1472 8.43493 19.1869 8.76951 19.32 9.07112V9.15112C19.4468 9.44689 19.6572 9.69914 19.9255 9.87682C20.1938 10.0545 20.5082 10.1498 20.83 10.1511H21C21.5304 10.1511 22.0391 10.3618 22.4142 10.7369C22.7893 11.112 23 11.6207 23 12.1511C23 12.6816 22.7893 13.1903 22.4142
13.5653C22.0391 13.9404 21.5304 14.1511 21 14.1511H20.91C20.5882 14.1524 20.2738 14.2478 20.0055 14.4254C19.7372 14.6031 19.5268 14.8554 19.4 15.1511V15.1511Z"
stroke="#52322B"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</g>
<defs>
<clipPath id="clip0_254_236">
<rect
width="24"
height="24"
fill="white"
transform="translate(0 0.151123)"
></rect>
</clipPath>
</defs>
</svg>
</button>
</div>
</div>
</div>
</section>
</div>
<div class="footer-container hidden">
<li id="nav-tabs-inner" class="footer-diamond-colors">
<svg
xmlns="http://www.w3.org/2000/svg"
width="40"
height="40"
viewBox="0 0 40 40"
>
<g transform="translate(-1143 -1225)">
<g transform="translate(1143.808 1227.616)">
<path
d="M15.6,3,21,13.795l-9,21.59"
transform="translate(7.192 0)"
fill="none"
stroke="#5a3540"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2.5"
/>
<path
d="M12.4,3,7,13.795l9,21.59"
transform="translate(3.197 0)"
fill="none"
stroke="#5a3540"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2.5"
/>
<path
d="M28.188,3H10.2L3,13.795l16.192,21.59,16.192-21.59Z"
transform="translate(0 0)"
fill="none"
stroke="#5a3540"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2.5"
/>
<path
d="M3,9H35.384"
transform="translate(0 4.795)"
fill="none"
stroke="#5a3540"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2.5"
/>
</g>
<path
d="M24,44A20,20,0,1,0,4,24,20,20,0,0,0,24,44Z"
transform="translate(1139 1221)"
fill="none"
/>
</g>
</svg>
</li>
<li id="nav-tabs-inner" class="footer-ring-colors">
<svg
xmlns="http://www.w3.org/2000/svg"
width="40"
height="40"
viewBox="0 0 48 48"
>
<rect
width="48"
height="48"
fill="rgba(255,255,255,0.01)"
/>
<path
d="M24,44A20,20,0,1,0,4,24,20,20,0,0,0,24,44Z"
fill="none"
stroke="#5a3540"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="3.5"
/>
<path
d="M24,36h0A12,12,0,0,0,36,24"
transform="translate(48 48) rotate(180)"
fill="none"
stroke="#5a3540"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="3.5"
/>
</svg>
</li>
<div id="configurator"></div>
</div>
<!-- <div id="configurator"></div>-->
<div id="webgi-canvas-container">
<canvas id="webgi-canvas"></canvas>
</div>
<!-- <script src="src/index.ts"></script> -->
<script src="src/scripts.js"></script>
</body>
</html>