fullib-js
Version:
Full Javascript Animation Library
167 lines (155 loc) • 6.71 kB
HTML
<html lang="en" translate="no">
<head>
<meta charset="UTF-8">
<title>Fullib-js : Cursor 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;
}
.cursor-hover .bulb{
background-color: beige;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
width: 80px;
height: 80px;
}
</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="container pt-5 mt-5">
<div class="row mt-5 mb-5">
<div class="col-12 text-center">
<h2 class="text-center custom-cursor cursor1"
data-html-content="<h3 class='mb-0 pb-0 read-more d-flex align-items-center justify-content-center text-dark'>🚀</h3>"
>ROCKET CENTER
</h2>
</div>
</div>
<div class="row mt-5 mb-5">
<div class="col-12 text-center">
<h2 class="text-center custom-cursor cursor2"
data-position="top right"
data-image-path="./../img/cursor.jpg"
data-image-width="200"
data-image-height="400"
>IMAGE ON CENTER RIGHT</h2>
</div>
</div>
<div class="row mt-5 mb-5">
<div class="col-12 text-center">
<h2 class="text-center custom-cursor cursor3"
data-position="center right"
data-offset-x="25"
data-html-content="<h3 class='mb-0 pb-0 read-more d-flex align-items-center justify-content-center text-dark'>+ see more</h3>"
>TEXT SEE MORE RIGHT</h2>
</div>
</div>
<div class="row mt-5 mb-5">
<div class="col-12 text-center">
<h2 class="text-center custom-cursor cursor4"
data-position="center left"
data-offset-x="-25"
data-html-content="<h3 class='mb-0 pb-0 read-more d-flex align-items-center justify-content-center text-dark'>+ see more</h3>"
>TEXT SEE MORE LEFT</h2>
</div>
</div>
<div class="row mt-5 mb-5">
<div class="col-12 text-center">
<h2 class="text-center custom-cursor cursor5"
data-position="center center"
data-offset-y="-40"
data-html-content="<h3 class='mb-0 pb-0 read-more d-flex align-items-center justify-content-center text-dark'>🡳</h3>"
>ARROW TOP</h2>
</div>
</div>
<div class="row mt-5 mb-5">
<div class="col-12 text-center">
<h2 class="text-center custom-cursor cursor6"
data-position="center center"
data-image-path="./../img/cursor.jpg"
data-image-width="500"
data-image-height="500"
>FAT IMAGE</h2>
</div>
</div>
<div class="row mt-5 mb-5">
<div class="col-12 text-center">
<h2 class="text-center custom-cursor cursor7"
data-position="center center"
data-image-path="./../img/cursor.jpg"
data-image-width="50"
data-image-height="50"
>MICRO IMAGE</h2>
</div>
</div>
<div class="row mt-5 mb-5">
<div class="col-12 text-center">
<h2 class="text-center custom-cursor cursor8"
data-position="center center"
data-html-content="<div class='bulb'>HERE</div>"
data-image-width="50"
data-image-height="50"
>BULB WITH TEXT</h2>
</div>
</div>
<div class="row mt-5 mb-5">
<div class="col-12 text-center">
<h2 class="text-center custom-cursor cursor9"
data-position="center center"
data-image-path="./../img/cursor.jpg"
data-image-width="50"
data-image-height="50"
>BULB WITH TEXT DEFORMATION</h2>
</div>
</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>