fullib-js
Version:
Full Javascript Animation Library
146 lines (134 loc) • 5.88 kB
HTML
<html lang="en" translate="no">
<head>
<meta charset="UTF-8">
<title>Fullib-js : Scroll animation</title>
<!-- Meta Description -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
body {
overflow-x: hidden;
}
.row, h1 {
text-align: center;
}
</style>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<body id="body" class="">
<div id="content">
<!-- HTML -->
<nav class="fixed-top navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="https://dev-florian.github.io/fullib-js/">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="https://dev-florian.github.io/fullib-js/pages/scroll">Scroll</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="https://dev-florian.github.io/fullib-js/pages/lottie">Lottie</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="https://dev-florian.github.io/fullib-js/pages/carousel">Carousel</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="https://dev-florian.github.io/fullib-js/pages/cursor">Cursor</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="position-relative" style="height: 100vh; background: #0A0908">
<div class="position-absolute text-white"
style="font-size: 30px; font-weight: bold; left: 50%; top: 50%; transform: translate(-50%, -50%)">
SCROLL DOWN
</div>
</div>
<div class="wave" style="background: #fff;">
<svg class="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#0A0908" fill-opacity="1"
d="M0,64L48,80C96,96,192,128,288,160C384,192,480,224,576,240C672,256,768,256,864,224C960,192,1056,128,1152,112C1248,96,1344,128,1392,144L1440,160L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path>
</svg>
</div>
<div class="container pt-5 mt-5">
<div class="row mt-5 mb-5">
<div class="col-12 text-center">
<h2 class="text-center scroll-lefttoright">scroll-lefttoright</h2>
</div>
</div>
<div class="row mt-5 mb-5">
<div class="col-12 text-center">
<h2 class="text-center scroll-righttoleft">scroll-righttoleft</h2>
</div>
</div>
<div class="row mt-5 mb-5">
<div class="col-12 text-center">
<h2 class="text-center scroll-toptobottom">scroll-toptobottom</h2>
</div>
</div>
<div class="row mt-5 mb-5">
<div class="col-12 text-center">
<h2 class="text-center scroll-bottomtotop">scroll-bottomtotop</h2>
</div>
</div>
<div class="row mt-5 mb-5">
<div class="col-12 text-center">
<h2 class="text-center scroll-rotateleft">scroll-rotateleft</h2>
</div>
</div>
<div class="row mt-5 mb-5">
<div class="col-12 text-center">
<h2 class="text-center scroll-rotateright">scroll-rotateright</h2>
</div>
</div>
<div class="row mt-5 mb-5">
<div class="col-12 text-center">
<h2 class="text-center scroll-scaleup">scroll-scaleup</h2>
</div>
</div>
<div class="row mt-5 mb-5">
<div class="col-12 text-center">
<h2 class="text-center scroll-scaledown">scroll-scaledown</h2>
</div>
</div>
<div class="row mt-5 mb-5">
<div class="col-12 text-center">
<h2 class="text-center scroll-opacity-up">scroll-opacity-up</h2>
</div>
</div>
<div class="row mt-5 mb-5">
<div class="col-12 text-center">
<h2 class="text-center scroll-opacity-down">scroll-opacity-down</h2>
</div>
</div>
<div class="row mt-5 mb-5">
<div class="col-12 text-center">
<h2 class="text-center scroll-skew-x">scroll-skew-x</h2>
</div>
</div>
<div class="row mt-5 mb-5">
<div class="col-12 text-center">
<h2 class="text-center scroll-skew-y">scroll-skew-y</h2>
</div>
</div>
<div class="" style="height: 1500px;"></div>
</div>
</div>
<script src="../build/bundle.js" async></script>
<script>
if (window.innerWidth < 991) {
let menuButton = document.querySelector('.navbar-toggler');
let menuContainer = document.getElementById('navbarNav');
menuButton.onclick = function (e) {
menuContainer.classList.toggle('d-block');
}
}
</script>
</body>
</html>