fullib-js
Version:
Full Javascript Animation Library
85 lines (73 loc) • 3.23 kB
HTML
<html lang="en" translate="no">
<head>
<meta charset="UTF-8">
<title>Fullib-js : Lottie 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="">
<!-- 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="container" style="height: 200vh">
<h1 class="mb-5">LOTTIE</h1>
<div class="mb-5">
Files : https://lottiefiles.com/fr/featured
</div>
<h2>LOOP</h2>
<div class="lottie-helper mt-5 mb-5" data-lottie-file="https://dev-florian.github.io/fullib-js/lottie/data.json"
style="width: 150px;"></div>
<h2>CLICK</h2>
<div class="mt-5 mb-5 lottie-helper" data-lottie-click="true"
data-lottie-file="https://dev-florian.github.io/fullib-js/lottie/button.json" style="width: 150px;"></div>
<h2>SCROLL</h2>
<div class="mt-5 mb-5 lottie-helper" data-lottie-scroll="true"
data-lottie-file="https://assets2.lottiefiles.com/packages/lf20_i9mxcD.json"
style="width:400px; height: 400px;"></div>
</div>
<script src="../build/bundle.js"></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>