130 lines
4.2 KiB
HTML
130 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" >
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>CodePen - Anime.js + ScrollMagic Scroll Based Animations</title>
|
|
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css'><link rel="stylesheet" href="./style.css">
|
|
|
|
</head>
|
|
<body>
|
|
<!-- partial:index.partial.html -->
|
|
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
|
|
<a class="navbar-brand" href="#">START</a>
|
|
<button
|
|
class="navbar-toggler"
|
|
type="button"
|
|
data-toggle="collapse"
|
|
data-target="#navbarsExampleDefault"
|
|
aria-controls="navbarsExampleDefault"
|
|
aria-expanded="false"
|
|
aria-label="Toggle navigation"
|
|
>
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
|
<ul class="navbar-nav mr-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#one">Section 1</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#two">Section 2</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#three">Section 3</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#four">Section 4</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<main role="main" class="container-fluid">
|
|
<div class="row no-gutters">
|
|
<div class="col text-center">
|
|
<h1 class="py-5">SCROLL DOWN TO TRY ANIMATIONS</h1>
|
|
<img
|
|
src="https://drive.google.com/uc?export=view&id=1g2iw0lEBMYFyKjI9A1jN2wm0glHiXubt"
|
|
class="img-fluid"
|
|
alt="Responsive image"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<section id="intro" class="section">
|
|
<div class="row no-gutters">
|
|
<div class="col">
|
|
<div>
|
|
The Neuron scales the steepest climbs and descends with complete
|
|
control thanks to its 130 - 140mm suspension, 29” wheels (in sizes
|
|
M-XL) and confidence-inspiring geometry.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section id="one" class="section">
|
|
<div class="row no-gutters">
|
|
<div class="col">
|
|
<div class="rectangle"></div>
|
|
<div class="elem">
|
|
<div class="text-block">
|
|
<h2 class="mb-0">2021</h2>
|
|
<h5>Neuron CF SLX 9</h5>
|
|
</div>
|
|
<div class="blocks">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section id="two" class="section">
|
|
<div class="row no-gutters">
|
|
<div class="col">
|
|
<div class="elem">
|
|
<div>
|
|
<img
|
|
src="https://drive.google.com/uc?export=view&id=1wx3G8XcML7t9hTiE1ioUkLUiqUHkI_AJ"
|
|
class="img-fluid"
|
|
alt="Responsive image"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section id="three" class="section">
|
|
<div class="image"></div>
|
|
<div class="row no-gutters">
|
|
<div class="col">
|
|
<div class="elem">
|
|
<h2>GET OUT THERE</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section id="four" class="section">
|
|
<div class="image"></div>
|
|
<div class="row no-gutters">
|
|
<div class="col">
|
|
<div class="elem">
|
|
<h2>GO RIDE</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<!-- partial -->
|
|
<script src='https://code.jquery.com/jquery-3.5.1.slim.min.js'></script>
|
|
<script src='https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js'></script>
|
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js'></script>
|
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js'></script>
|
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js'></script><script src="./script.js"></script>
|
|
|
|
</body>
|
|
</html>
|