A smooth 3D tilt JavaScript library forked from Tilt.js.
Installation using npm
npm i vanilla-tilt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vanilla Tilt Js</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
.container {
height: 100vh;
width: 100%;
background-color: #111;
display: flex;
justify-content: center;
align-items: center;
}
.card {
width: 300px;
height: 400px;
border-radius: 15px;
text-align: center;
color: white;
display: flex;
flex-direction: column;
gap: 10px;
background-color: black;
border: 2px solid white;
padding: 10px 15px;
transform-style: preserve-3d;
transform: perspective(1000px);
transition: 0.4s all linear;
padding: 20px 15px;
overflow: hidden;
}
.card p {
transform: translateY(100px);
opacity: 0;
transition: 0.2s ease;
}
.card:hover {
border: 2px solid red;
box-shadow: 0px 0px 12px 5px red;
}
.card:hover p {
transform: translateY(0px);
opacity: 1;
}
.innerElem {
transform: translateZ(20px) translateY(-100px);
opacity: 0;
transition: 0.2s ease;
}
.card:hover .innerElem {
opacity: 1;
transform: translateY(0px);
}
.card h1 {
transition: 0.3s ease;
font-size: 2.5rem;
}
.card:hover h1 {
transform: translateY(-30px);
opacity: 0;
font-size: 0px;
letter-spacing: 40px;
}
.innerElem img {
object-fit: cover;
aspect-ratio: 1/1;
width: 140px;
border-radius: 50%;
transition: 0.5s all ease-in-out linear;
}
.card:hover img {
outline: 4px solid black;
outline-offset: 4px;
}
p button {
border: none;
padding: 8px 15px;
border-radius: 20px;
cursor: pointer;
transition: 0.4s all ease;
}
p button:hover {
background-color: #111;
border: 1.5px solid white;
color: white;
}
</style>
</head>
<body>
<div class="container">
<div class="card" data-tilt data-tilt-scale="1.1">
<div class="innerElem">
<img
class="image"
src="https://cdn.pixabay.com/photo/2014/04/03/10/32/user-310807_640.png"
alt=""
/>
<h3>Susan</h3>
</div>
<h1>Hover Me</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rem
exercitationem ipsum quo! Temporibus magni non doloribus quam quos
ipsa animi eius dolores, sunt exercitationem iure. <br /><br />
<button>Read more</button>
</p>
</div>
</div>
<script type="text/javascript" src="vanilla-tilt.js"></script>
<script type="text/javascript">
VanillaTilt.init(document.querySelector(".card"), {
max: 25,
speed: 400,
glare: true
});
VanillaTilt.init(document.querySelector(".image"), {
max: 25,
speed: 400
});
//It also supports NodeList
// VanillaTilt.init(document.querySelectorAll(".your-element"));
</script>
</body>
</html>
Methods:
const element = document.querySelector(".js-tilt");
VanillaTilt.init(element);
// Destroy instance
element.vanillaTilt.destroy();
// Get values of instance
element.vanillaTilt.getValues();
// Reset instance
element.vanillaTilt.reset();
// It also supports NodeList
const elements = document.querySelectorAll(".js-tilt");
VanillaTilt.init(elements);
Don't forget to download and link the vanilla-tilt.js file(if working with the static sites)
Top comments (0)