forked from pixotronics/webgi-vanilla-starter
-
Notifications
You must be signed in to change notification settings - Fork 49
/
index.html
135 lines (113 loc) · 14.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>WEBGi Camera Landing Page Demo</title>
<meta name="description" content="Threejs demo landing page for product visualization using WEBGi - by Neotix">
<meta property="og:url" content="https://camera-webgi.vercel.app/">
<meta property="og:type" content="website">
<meta property="og:title" content="Threejs demo landing page for product visualization using WEBGi - By Neotix">
<meta property="og:description" content="Threejs demo landing page for product visualization using WEBGi - by Neotix">
<meta property="og:image" content="https://camera-webgi.vercel.app/textures/imageSocial.jpg">
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="camera-webgi.vercel.app/">
<meta property="twitter:url" content="https://camera-webgi.vercel.app/">
<meta name="twitter:title" content="Threejs demo landing page for product visualization using WEBGi - By Neotix">
<meta name="twitter:description" content="Threejs demo landing page for product visualization using WEBGi - by Neotix">
<meta name="twitter:image" content="https://camera-webgi.vercel.app/assets/imageSocial.jpg">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="www.neotix.com.br">
<meta charset="UTF-8" />
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicons/favicon-16x16.png">
<link rel="manifest" href="assets/favicons/site.webmanifest">
<meta name="msapplication-TileColor" content="#d50f0fc3">
<meta name="theme-color" content="#d50f0fc3">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<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=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="loader">
<img src="assets/images/logo.png" width="80px">
<p>Loading... Please wait</p>
<div class="progress"></div>
</div>
<section class="header">
<div class="header--container">
<img class="header--brand" src="assets/images/logo.png">
<ul class="header--menu">
<li>Features</li>
<li>Experience it</li>
<li>Buy now</li>
</ul>
</div>
</section>
<section class="section cam-view-1">
<div class="hero--container">
<div class="hero--content">
<h2>Always shoot like a</h2>
<h1>Pro</h1>
<p>Discover our most advanced camera and lens series yet: blazing fast AF, incredible low light performance, superb image stabilization, sharp image quality, and so much more.</p>
<button tabindex="-1" class="button button-know-more">Know more</button>
</div>
</div>
<div class="hero--scroller--container">
<div class="hero--scroller">
<p class="hero--scroller--text">Start scrolling to explore</p>
<svg class="bounce" width="36" height="36" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 33a15 15 0 1 0 0-30 15 15 0 0 0 0 30Z" stroke="#929292" stroke-linecap="round" stroke-linejoin="round"/><path d="m12 18 6 6 6-6M18 12v12" stroke="#929292" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
</div>
<div class="performance--container">
<div class="performance--content">
<h2>Outstanding</h2>
<h1>Performance</h1>
<p>The EOS R10 is perfect for content creators looking to take their creativity to the next level. Featuring a high-speed shooting 15 FPS mechanical shutter1,2, a 24.2 Megapixel CMOS (APS-C) sensor, and lightning fast autofocus, the EOS R10 camera brings some of the best features from the growing EOS R Series to a sleek, lightweight design.</p>
<img src="assets/images/performance_video.jpg">
<svg width="194" height="26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m48 17-2.6-9.8h1.2l2.1 8.4 2.4-8.4h1.3l2.4 8.4 2.1-8.4h1.3L55.4 17h-1.3l-2.3-8-2.4 8H48Zm11 0V7H60v4.2l1-1c.4-.2 1-.3 1.4-.3.8 0 1.5.2 2 .7.4.5.7 1.3.7 2.3V17H64v-4c0-1.4-.6-2.1-1.7-2.1a2 2 0 0 0-1.6.7c-.4.4-.6 1-.6 1.8V17H59Zm9.7.2c-.6 0-1-.1-1.4-.3A2 2 0 0 1 66 15c0-.7.3-1.2.8-1.6.6-.4 1.3-.6 2.3-.6H71c0-.7-.1-1.1-.4-1.4-.4-.4-.8-.5-1.3-.5a2 2 0 0 0-1.2.3c-.3.3-.5.6-.6 1h-1.2c0-.5.2-.9.5-1.2.3-.4.6-.7 1-.8l1.5-.3c1 0 1.7.2 2.2.8.5.5.7 1.2.7 2V17h-1l-.1-1.2-.9 1c-.4.2-.9.4-1.5.4Zm.2-1c.4 0 .8-.1 1.1-.4.4-.2.6-.5.8-.9l.2-1.2h-1.8c-.6 0-1.1.1-1.4.4-.3.2-.4.5-.4.9 0 .3 0 .6.4.9.2.2.6.3 1 .3Zm7 .8c-.6 0-1-.2-1.4-.5-.4-.3-.6-.8-.6-1.6V11h-1.2v-1H74l.2-1.7h1V10h2v1h-2v3.8c0 .4 0 .7.3.9.1.1.4.2.9.2h.7v1h-1Zm5.2.2c-.7 0-1.3-.2-1.8-.5s-1-.7-1.3-1.3a4 4 0 0 1-.4-1.9c0-.7.1-1.3.4-1.9.3-.5.8-1 1.3-1.3.5-.3 1.1-.4 1.8-.4.8 0 1.5.2 2 .6.6.5 1 1 1.1 1.8H83c0-.5-.3-.8-.7-1-.3-.3-.8-.4-1.2-.4a2.2 2.2 0 0 0-2 1.2 3 3 0 0 0-.3 1.4c0 .6.1 1 .3 1.5.2.4.5.7.9.9.3.2.7.3 1 .3.5 0 1-.1 1.3-.4.4-.2.6-.6.7-1h1.2c-.1.7-.5 1.3-1 1.7-.6.4-1.3.7-2.1.7Zm4.2-.2V7h1.2v4.2c.2-.4.5-.7 1-1 .4-.2.9-.3 1.4-.3.8 0 1.4.2 1.9.7.5.5.7 1.3.7 2.3V17h-1.1v-4c0-1.4-.6-2.1-1.8-2.1a2 2 0 0 0-1.5.7c-.4.4-.6 1-.6 1.8V17h-1.2Zm13.3 0c-.6 0-1-.2-1.5-.5-.3-.3-.5-.8-.5-1.6V11h-1.2v-1h1.2l.2-1.7h1V10h2v1h-2v3.8c0 .4 0 .7.2.9l1 .2h.7v1h-1Zm2.2 0V7h1.1v4.2l1-1 1.4-.3c.8 0 1.5.2 2 .7.4.5.7 1.3.7 2.3V17h-1.2v-4c0-1.4-.6-2.1-1.7-2.1a2 2 0 0 0-1.6.7c-.4.4-.6 1-.6 1.8V17h-1.1Zm10.5.2c-.6 0-1.2-.2-1.7-.5s-1-.7-1.3-1.3a4 4 0 0 1-.4-1.9c0-.7.2-1.3.4-1.9.3-.5.7-1 1.2-1.3.6-.3 1.2-.4 1.9-.4a3.2 3.2 0 0 1 3.2 3.5v.4h-5.5c0 .5.1 1 .3 1.3.3.4.5.6.9.8a2.1 2.1 0 0 0 2.3 0l.7-1h1.1c-.2.7-.5 1.2-1 1.6-.6.5-1.3.7-2 .7Zm0-6.3c-.5 0-1 .2-1.5.5a2 2 0 0 0-.7 1.5h4.4a2 2 0 0 0-.7-1.5c-.4-.3-.9-.5-1.5-.5Zm7.5 6.1V7h1.1v10h-1.1Zm4.8.2c-.6 0-1-.1-1.4-.3A2 2 0 0 1 121 15c0-.7.3-1.2.9-1.6.5-.4 1.2-.6 2.2-.6h1.8c0-.7-.1-1.1-.4-1.4-.4-.4-.8-.5-1.3-.5a2 2 0 0 0-1.2.3c-.3.3-.5.6-.6 1h-1.2c0-.5.2-.9.5-1.2.3-.4.6-.7 1-.8l1.5-.3c1 0 1.7.2 2.2.8.5.5.7 1.2.7 2V17h-1l-.1-1.2-.9 1c-.3.2-.9.4-1.5.4Zm.2-1c.4 0 .8-.1 1.1-.4.4-.2.6-.5.8-.9.2-.4.2-.8.2-1.2h-1.7c-.7 0-1.2.1-1.5.4-.3.2-.4.5-.4.9 0 .3.1.6.4.9.2.2.6.3 1.1.3Zm7 1c-.8 0-1.4-.3-2-.8-.4-.5-.6-1.2-.6-2.3v-4h1.1V14c0 1.4.6 2.2 1.8 2.2a2 2 0 0 0 1.5-.7c.4-.4.6-1 .6-1.8V10h1.2V17h-1l-.2-1.2c-.2.4-.5.7-1 1-.3.2-.8.4-1.3.4Zm5-.2v-7h1l.1 1.3c.2-.4.6-.8 1-1 .4-.3.9-.4 1.4-.4.8 0 1.5.2 2 .7.5.5.7 1.3.7 2.3V17h-1.2v-4c0-1.4-.6-2.1-1.8-2.1a2 2 0 0 0-1.5.7c-.4.4-.6 1-.6 1.8V17h-1.1Zm10.6.2c-.6 0-1.2-.2-1.8-.5-.5-.3-1-.7-1.2-1.3a4 4 0 0 1-.5-1.9c0-.7.2-1.3.5-1.9.3-.5.7-1 1.2-1.3.6-.3 1.2-.4 1.8-.4.8 0 1.5.2 2 .6.7.5 1 1 1.2 1.8h-1.2c-.1-.5-.4-.8-.7-1-.4-.3-.8-.4-1.3-.4a2.2 2.2 0 0 0-2 1.2 3 3 0 0 0-.3 1.4c0 .6.1 1 .4 1.5.2.4.4.7.8.9.3.2.7.3 1.1.3.5 0 1-.1 1.3-.4.3-.2.6-.6.7-1h1.2c-.2.7-.5 1.3-1.1 1.7-.6.4-1.3.7-2 .7Zm4.2-.2V7h1.2v4.2l1-1c.4-.2 1-.3 1.4-.3.8 0 1.5.2 2 .7.4.5.7 1.3.7 2.3V17h-1.2v-4c0-1.4-.6-2.1-1.7-2.1a2 2 0 0 0-1.6.7c-.4.4-.6 1-.6 1.8V17h-1.2Zm12.6 0-2.6-7h1.2L164 16 166 10h1.2l-2.6 6.9h-1.4Zm5.5-8.5c-.2 0-.4 0-.6-.2a.8.8 0 0 1-.2-.6c0-.2 0-.4.2-.6l.6-.2c.2 0 .4 0 .6.2l.2.6c0 .2 0 .4-.2.6l-.6.2Zm-.6 8.5v-7h1.2v7H168Zm5.8.2a3.3 3.3 0 0 1-3-1.8 4 4 0 0 1-.4-1.9c0-.7.1-1.3.4-1.8.3-.6.7-1 1.2-1.3.5-.4 1.1-.5 1.8-.5.6 0 1.1.1 1.5.3.5.3.8.6 1 1V7h1.2V17h-1l-.1-1.1-1 .9c-.4.2-1 .4-1.6.4Zm.2-1c.4 0 .8-.2 1.2-.4.3-.2.6-.5.8-.9.2-.4.3-.8.3-1.4 0-.5 0-1-.3-1.3l-.8-1c-.4-.2-.8-.3-1.3-.3a2.3 2.3 0 0 0-2 1.3 3 3 0 0 0-.3 1.3c0 .6 0 1 .3 1.4l.8 1 1.3.2Zm8 1c-.6 0-1.2-.2-1.7-.5-.6-.3-1-.7-1.3-1.3a4 4 0 0 1-.4-1.9c0-.7.2-1.3.4-1.9.3-.5.7-1 1.2-1.3.6-.3 1.2-.4 1.9-.4a3.2 3.2 0 0 1 3.2 3.5v.4h-5.5c0 .5.1 1 .3 1.3.3.4.5.6.9.8a2.1 2.1 0 0 0 2.3 0l.7-1h1.1c-.2.7-.5 1.2-1 1.6-.6.5-1.3.7-2 .7Zm0-6.3c-.5 0-1 .2-1.5.5a2 2 0 0 0-.7 1.5h4.4a2 2 0 0 0-.7-1.5c-.4-.3-.9-.5-1.5-.5Zm7.5 6.3c-.7 0-1.3-.2-1.8-.5s-1-.7-1.2-1.2a4 4 0 0 1-.5-2c0-.7.2-1.3.5-1.9.3-.5.7-1 1.2-1.3.6-.3 1.2-.4 1.8-.4.7 0 1.2.1 1.8.4.5.3 1 .8 1.2 1.3.3.6.5 1.2.5 2 0 .7-.2 1.3-.5 1.9-.3.5-.7 1-1.3 1.2-.5.3-1 .5-1.7.5Zm0-1a2.2 2.2 0 0 0 2-1.2c.2-.4.3-.9.3-1.5s-.1-1-.4-1.4a2.1 2.1 0 0 0-1.9-1.2c-.4 0-.8 0-1.1.3-.4.2-.6.5-.9.9a3 3 0 0 0-.3 1.4c0 .6.1 1 .3 1.5.3.4.5.7.9.9.3.2.7.3 1 .3ZM45 18.8h148.7v.6H45v-.6Z" fill="#000"/><path d="M33.8 4.6a4.2 4.2 0 0 0-2.9-3C28.3 1 18 1 18 1S7.7 1 5.1 1.7a4.2 4.2 0 0 0-3 3 43.5 43.5 0 0 0 0 16 4.2 4.2 0 0 0 3 2.8c2.6.7 12.9.7 12.9.7s10.3 0 12.9-.7a4.2 4.2 0 0 0 3-3 43.5 43.5 0 0 0 0-15.9v0Z" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="m14.6 17.5 8.7-4.9-8.7-4.9v9.8Z" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
</div>
</section>
<section class="section cam-view-2">
</section>
<section class="section cam-view-3">
<div class="power--container">
<div class="power--content">
<h2>Features that bring you</h2>
<h1>Power</h1>
<p>The easy-to-carry EOS R10 packs advanced features into a lightweight, compact design. Pair with a Canon RF-S/RF lens for a high-performance setup that fits easily and comfortably in your hand.</p>
<svg class="power--img" width="585" height="316" viewBox="0 0 585 316" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity="0.02" fill-rule="evenodd" clip-rule="evenodd" d="M-28 310.832V0H88.0215C112.581 0 133.286 4.09558 149.9 12.5683C166.408 20.987 178.89 32.6688 187.126 47.6425C195.279 62.4644 199.314 79.0446 199.314 97.2754C199.314 114.657 195.417 130.776 187.591 145.551L187.582 145.569L187.572 145.587C179.63 160.275 167.313 172.079 150.878 181.059L150.849 181.075L150.819 181.09C134.176 189.881 113.154 194.12 88.0215 194.12H36.3754V310.832H-28ZM31.7024 189.439H88.0215C112.67 189.439 132.876 185.276 148.64 176.95C164.403 168.336 176.011 157.139 183.463 143.357C190.915 129.289 194.641 113.928 194.641 97.2754C194.641 79.7615 190.772 63.9702 183.033 49.9016C175.295 35.8331 163.544 24.7792 147.78 16.74C132.016 8.7008 112.097 4.6812 88.0215 4.6812H-23.327V306.151H31.7024V189.439ZM122.549 65.7017L122.494 65.6446C115.471 58.3665 103.26 54.1522 84.5822 54.1522H36.3754V139.968H84.5822C103.295 139.968 115.531 135.881 122.55 128.85C130.099 121.287 134.079 110.945 134.079 97.2754C134.079 83.2824 130.08 72.9942 122.606 65.7568L122.549 65.7017ZM31.7024 144.649V49.471H84.5822C103.785 49.471 117.543 53.7777 125.854 62.3911C134.453 70.7174 138.752 82.3455 138.752 97.2754C138.752 111.918 134.453 123.546 125.854 132.16C117.543 140.486 103.785 144.649 84.5822 144.649H31.7024ZM214.655 310.832V87.8568H272.447L276.51 119.397C283.601 109.937 292.249 102.084 302.44 95.8675C316.745 87.0293 333.379 82.6888 352.172 82.6888H356.845V150.192H336.695C325.138 150.192 314.986 151.983 306.164 155.465C297.736 158.79 291.083 164.516 286.142 172.832C281.552 181.033 279.03 192.884 279.03 208.819V310.832H214.655ZM282.096 170.489C287.541 161.302 294.993 154.842 304.451 151.109C313.909 147.377 324.657 145.511 336.695 145.511H352.172V87.37C350.597 87.37 349.039 87.4017 347.499 87.465C331.383 88.128 317.177 92.2595 304.881 99.8594C293.791 106.622 284.628 115.415 277.391 126.24C276.024 128.285 274.726 130.401 273.497 132.59L268.338 92.538H219.328V306.151H274.357V208.819C274.357 192.454 276.936 179.677 282.096 170.489ZM412.913 301.167L412.897 301.158C395.846 291.269 382.229 277.619 372.085 260.283L372.061 260.242L372.038 260.201C362.138 242.47 357.256 222.139 357.256 199.344C357.256 176.534 362.289 156.317 372.506 138.851C382.645 121.232 396.262 107.428 413.327 97.5309L413.343 97.5221L413.358 97.5134C430.741 87.6058 450.178 82.6888 471.558 82.6888C492.657 82.6888 511.814 87.6087 528.914 97.5225C546.267 107.417 559.901 121.228 569.765 138.877C579.972 156.337 585 176.545 585 199.344C585 222.159 579.966 242.505 569.765 260.243C559.891 277.621 546.248 291.287 528.898 301.175C511.525 311.077 492.234 316 471.128 316C449.748 316 430.311 311.083 412.928 301.175L412.913 301.167ZM565.71 141.204C556.252 124.264 543.211 111.057 526.587 101.582C510.251 92.1074 491.907 87.37 471.558 87.37C450.922 87.37 432.292 92.1074 415.669 101.582C399.332 111.057 386.291 124.264 376.546 141.204C366.802 157.856 361.929 177.237 361.929 199.344C361.929 221.452 366.658 240.976 376.116 257.916C385.861 274.568 398.902 287.632 415.239 297.107C431.862 306.581 450.492 311.319 471.128 311.319C491.477 311.319 509.964 306.581 526.587 297.107C543.211 287.632 556.252 274.568 565.71 257.916C575.455 240.976 580.327 221.452 580.327 199.344C580.327 177.237 575.455 157.856 565.71 141.204ZM505.205 154.828L505.183 154.806C495.377 144.718 484.23 139.856 471.558 139.856C458.258 139.856 446.839 144.759 437.075 154.804C427.914 164.236 422.921 178.788 422.921 199.344C422.921 219.858 427.894 234.577 437.074 244.314C446.838 254.075 458.12 258.833 471.128 258.833C484.146 258.833 495.435 254.068 505.204 244.292C514.657 234.552 519.765 219.844 519.765 199.344C519.765 178.82 514.646 164.286 505.227 154.85L505.205 154.828ZM508.531 247.58C497.926 258.203 485.459 263.514 471.128 263.514C456.797 263.514 444.33 258.203 433.725 247.58C423.407 236.669 418.248 220.591 418.248 199.344C418.248 178.098 423.407 162.163 433.725 151.54C444.33 140.63 456.941 135.174 471.558 135.174C485.602 135.174 497.926 140.63 508.531 151.54C519.135 162.163 524.438 178.098 524.438 199.344C524.438 220.591 519.135 236.669 508.531 247.58Z" fill="black"/></svg>
</div>
<div class="power--features--img">
<img src="assets/images/power_features.png">
</div>
</div>
</section>
<section class="section cam-view-4">
<div class="autofocus--container">
<div class="autofocus--content">
<h1>Smart, speedy <strong>autofocus</strong></h1>
<p>Canon's Dual Pixel CMOS AF technology with people, animal, and vehicle subject detection lets you keep your eye on the action while it keeps your subject in crystal clear focus.</p>
<!-- <img class="autofocus--img" src="assets/images/autofocus.png"> -->
</div>
</div>
</section>
<section class="section cam-view-5">
<div class="explore--container">
<div class="explore--content">
<h1>Interactive<strong><br>3D gallery</strong></h1>
<button tabindex="-1" class="button button-explore">Explore</button>
</div>
</div>
</section>
<div class="exit--container">
<button class="button--secondary button--body">View body only</button>
<button class="button--secondary button--exit">Exit</button>
</div>
<div id="webgi-canvas-container">
<canvas id="webgi-canvas"></canvas>
</div>
<script src="src/index.ts"></script>
</body>
</html>