forked from Kirilbt/bike-demo-threejs
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
201 lines (170 loc) · 11.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name="viewport" content="initial-scale=1.0, viewport-fit=cover" />
<title>Vitesse - AIR-008</title>
</head>
<body class="dark-theme">
<div class="experience">
<canvas class="experience-canvas"></canvas>
</div>
<!-- Preloader -->
<div class="preloader">
<div class="preloader-wrapper">
<div class="loading">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
</div>
<div class="page" asscroll-container>
<!-- Navbar -->
<nav class="navbar">
<div class="navbar-left">
<a class="navbar-brand" href="">Vitesse</a>
</div>
<div class="navbar-right">
<div class="toggle-bar">
<div class="sun-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M12 15q1.25 0 2.125-.875T15 12q0-1.25-.875-2.125T12 9q-1.25 0-2.125.875T9 12q0 1.25.875 2.125T12 15Zm0 2q-2.075 0-3.537-1.463Q7 14.075 7 12t1.463-3.538Q9.925 7 12 7t3.538 1.462Q17 9.925 17 12q0 2.075-1.462 3.537Q14.075 17 12 17ZM2 13q-.425 0-.712-.288Q1 12.425 1 12t.288-.713Q1.575 11 2 11h2q.425 0 .713.287Q5 11.575 5 12t-.287.712Q4.425 13 4 13Zm18 0q-.425 0-.712-.288Q19 12.425 19 12t.288-.713Q19.575 11 20 11h2q.425 0 .712.287.288.288.288.713t-.288.712Q22.425 13 22 13Zm-8-8q-.425 0-.712-.288Q11 4.425 11 4V2q0-.425.288-.713Q11.575 1 12 1t.713.287Q13 1.575 13 2v2q0 .425-.287.712Q12.425 5 12 5Zm0 18q-.425 0-.712-.288Q11 22.425 11 22v-2q0-.425.288-.712Q11.575 19 12 19t.713.288Q13 19.575 13 20v2q0 .425-.287.712Q12.425 23 12 23ZM5.65 7.05 4.575 6q-.3-.275-.288-.7.013-.425.288-.725.3-.3.725-.3t.7.3L7.05 5.65q.275.3.275.7 0 .4-.275.7-.275.3-.687.287-.413-.012-.713-.287ZM18 19.425l-1.05-1.075q-.275-.3-.275-.712 0-.413.275-.688.275-.3.688-.287.412.012.712.287L19.425 18q.3.275.288.7-.013.425-.288.725-.3.3-.725.3t-.7-.3ZM16.95 7.05q-.3-.275-.287-.688.012-.412.287-.712L18 4.575q.275-.3.7-.288.425.013.725.288.3.3.3.725t-.3.7L18.35 7.05q-.3.275-.7.275-.4 0-.7-.275ZM4.575 19.425q-.3-.3-.3-.725t.3-.7l1.075-1.05q.3-.275.713-.275.412 0 .687.275.3.275.288.688-.013.412-.288.712L6 19.425q-.275.3-.7.287-.425-.012-.725-.287ZM12 12Z"/></svg>
</div>
<button class="toggle-button">
<div class="toggle-circle"></div>
</button>
<div class="moon-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M12 21q-3.75 0-6.375-2.625T3 12q0-3.75 2.625-6.375T12 3q.35 0 .688.025.337.025.662.075-1.025.725-1.637 1.887Q11.1 6.15 11.1 7.5q0 2.25 1.575 3.825Q14.25 12.9 16.5 12.9q1.375 0 2.525-.613 1.15-.612 1.875-1.637.05.325.075.662Q21 11.65 21 12q0 3.75-2.625 6.375T12 21Zm0-2q2.2 0 3.95-1.212 1.75-1.213 2.55-3.163-.5.125-1 .2-.5.075-1 .075-3.075 0-5.238-2.162Q9.1 10.575 9.1 7.5q0-.5.075-1t.2-1q-1.95.8-3.162 2.55Q5 9.8 5 12q0 2.9 2.05 4.95Q9.1 19 12 19Zm-.25-6.75Z"/></svg>
</div>
</div>
</div>
</nav>
<div class="page-wrapper" asscroll>
<!-- Hero Section -->
<section class="hero">
<div class="hero-wrapper">
<!-- Intro -->
<div class="intro-text">Scroll down to unbox</div>
<div class="arrow-svg-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M12 14.95q-.2 0-.375-.063-.175-.062-.325-.212L6.675 10.05q-.275-.275-.262-.688.012-.412.287-.687.275-.275.7-.275.425 0 .7.275l3.9 3.9 3.925-3.925q.275-.275.688-.263.412.013.687.288.275.275.275.7 0 .425-.275.7l-4.6 4.6q-.15.15-.325.212-.175.063-.375.063Z"/></svg>
</div>
<div class="hero-main">
<h1 class="hero-main-title">AIR-008</h1>
<p class="hero-main-description">Pure Speed | Built to Win</p>
</div>
<div class="hero-second">
<p class="hero-second-subheading first-sub">Limited Edition</p>
<p class="hero-second-subheading second-sub">• 100</p>
</div>
</div>
</section>
<!-- First Section -->
<div class="first-move section-margin"></div>
<section class="first-section section left">
<div class="progress-wrapper progress-bar-wrapper-left">
<div class="progress-bar"></div>
</div>
<div class="section-intro-wrapper">
<h2 class="section-title">
<span class="section-title-text">Cockpit</span>
</h2>
<span class="section-number">01</span>
</div>
<div class="section-detail-wrapper">
<img class="section-image" src="/images/cockpit.jpeg" alt="Cockpit picture">
<h3 class="section-heading">A pro-level cockpit</h3>
<p class="section-text">This cockpit features thicker walls in key positions for extra strength and stability where it matters most. You can adjust the fit quickly, easily, and precisely, thanks to height and width adjustment without using spacers or cutting the steerer tube.</p>
<h3 class="section-heading">Vitesse VTS022 Aerocockpit</h3>
<p class="section-text">Now with reinforced carbon walls for added stiffness and improved durability, this is the latest generation of aerodynamically optimised, Vitesse-developed WorldTour-level cockpits. With complete cable and wire integration, get super-clean optics and reduced drag at the same time. And with single-tool adjustable height and width, big spacer stacks are a thing of the past.</p>
<h3 class="section-heading">Vitesse Ergospeed Gel</h3>
<p class="section-text">Bar tape with EVA foam and elastomer gel mix for optimal comfort</p>
</div>
</section>
<!-- Second Section -->
<div class="second-move section-margin"></div>
<section class="second-section section right">
<div class="progress-wrapper progress-bar-wrapper-right">
<div class="progress-bar"></div>
</div>
<div class="section-intro-wrapper">
<h2 class="section-title">
<span class="section-title-text">Drivetrain</span>
</h2>
<span class="section-number">02</span>
</div>
<div class="section-detail-wrapper">
<img class="section-image" src="/images/drivetrain.jpeg" alt="Drivetain picture">
<h3 class="section-heading">SRAM Force AXS Powermeter</h3>
<p class="section-text">When only the very highest levels of performance will do, then you need a power meter. This model is seamlessly integrated in the crank and connects wirelessly with all common GPS units and SRAM’s AXS system, so you can measure your training and racing efforts in real time with pinpoint accuracy.</p>
<h3 class="section-heading">Pedals</h3>
<p class="section-text">The PD-V8000 pedals from Vitesse combine the two most desired qualities for road cyclists: stiffness and light weight. With a carbon-composite body, an extra-wide platform and a reduced stack height, you get the power transfer you’ve always dreamed about. Perfect for racers!</p>
<h3 class="section-heading">Chain</h3>
<p class="section-text">SRAM FORCE D1 12-speed with signature flat-top design for quieter operation, increased strength and durability. Hard chrome plated inner link plates and rollers for reduced wear.</p>
</div>
</section>
<!-- Third Section -->
<div class="third-move section-margin"></div>
<section class="third-section section left">
<div class="progress-wrapper progress-bar-wrapper-left">
<div class="progress-bar"></div>
</div>
<div class="section-intro-wrapper">
<h2 class="section-title">
<span class="section-title-text">Seat</span>
</h2>
<span class="section-number">03</span>
</div>
<div class="section-detail-wrapper">
<img class="section-image" src="/images/bike.jpeg" alt="Bike picture">
<h3 class="section-heading">Selle Italia SLR Boost Superflow S</h3>
<p class="section-text">Saddle with modern short-nose design and unisex ergonomics.</p>
<h3 class="section-heading">Vitesse SP0046 Aero Seatpost</h3>
<p class="section-text">This lightweight Vitesse-developed carbon seatpost now features a new sleeve bearing that creates a seal and reduces seatpost and seat tube friction and prevents dirt from entering. It’s lightweight and also gives you extra aero gains, thanks to its aerodynamically optimised tube profile. The new, lower mounted clamping mechanism and unique double-chamber design increase comfort, and we combine it with a Selle Italia saddle, for incredible performance.</p>
</div>
</section>
<!-- Fourth Section -->
<div class="fourth-move section-margin"></div>
<section class="fourth-section section right">
<div class="progress-wrapper progress-bar-wrapper-right">
<div class="progress-bar"></div>
</div>
<div class="section-intro-wrapper">
<h2 class="section-title">
<span class="section-title-text">About This Project</span>
</h2>
<span class="section-number">04</span>
</div>
<div class="section-detail-wrapper">
<h3 class="section-heading">The Goal</h3>
<p class="section-text">This fictive project was created to showcase my current skills using Three.js and GSAP. <br>
Last update: 23 Aug 2022</p>
<h3 class="section-heading">Special Thanks to:</h3>
<ul>
<li class="section-text">Andrew Woan for all your help and your amazing <a href="https://www.youtube.com/watch?v=rxTb9ys834w&t=9266s">tutorial</a> inspired by <a href="https://bokoko33.me/">Bokoko33's portfolio</a>.</li>
<li class="section-text">Bruno Simon for all the knowledge I've learned with <a href="https://threejs-journey.com/">Three.js Journey</a></li>
<li class="section-text">And to all the people from the Three.js Journey's discord who helped me</li>
</ul>
<h3 class="section-heading">Credits:</h3>
<ul>
<li class="section-text">Bike model by <a href="https://market.pmnd.rs/model/bike">market.pmnd.rs</a></li>
<li class="section-text">Photos by <a href="https=unsplash&utm_medium=referral&utm_content=creditCopyText">Josh Nuttall</a>
</li>
</ul>
</div>
<footer>
<div>© 2022 - <a class="footer-link" href="https://kiril.ch">kiril.ch</a></div>
<div class="socials">
<a class="footer-link" href="https://github.com/Kirilbt/bike-demo-threejs">github</a>
<a class="footer-link" href="https://twitter.com/kirilbt">twitter</a>
<a class="footer-link" href="https://www.linkedin.com/in/kiriltucker/">linkedin</a>
</div>
</footer>
</section>
</div>
<!-- Debug -->
<div class="debug"></div>
</div>
<script type="module" src="/main.js"></script>
</body>
</html>