Merhabalar, bugünkü uygulamamızda javascript vanilla framework 'u ile animasyon yapımı için gerekli adımları anlatacağım.
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Vanilla tilt.js</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="box">
<div class="imgBx">
<img src="1.jpg" alt="">
</div>
<div class="contentBx">
<h2>Tilt box Hover Effects</h2>
<p>Lorem ipsum dolor si
t amet consectetur adipisi
cing elit. Aperiam alias itaque
modi, distinctio fuga deserunt
quaerat, atque labore magni possimus adipisci cul
pa voluptatibus voluptas ex ut facilis eaque laud
antium beatae!</p>
</div>
</div>
<div class="box">
<div class="imgBx">
<img src="1.jpg" alt="">
</div>
<div class="contentBx">
<h2>Tilt box Hover Effects</h2>
<p>Lorem ipsum dolor si
t amet consectetur adipisi
cing elit. Aperiam alias itaque
modi, distinctio fuga deserunt
quaerat, atque labore magni possimus adipisci cul
pa voluptatibus voluptas ex ut facilis eaque laud
antium beatae!</p>
</div>
</div>
</div>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript">
VanillaTilt.init(document.querySelectorAll(".box"), {
max: 25,
speed: 400
});
</script>
</body>
</html>
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 50px 0;
transform-style: preserve-3d;
}
.container .box {
position: relative;
width: 450px;
height: 300px;
margin: 60px 0;
background: #000;
background: #000;
transform-style: preserve-3d;
}
.container .box .imgBx {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.container .box:hover {
box-shadow: 0 50px 80px rgba(0,0,0,.2);
}
.container .box .contentBx {
position: absolute;
top: 50%;
left:50px;
right: 50px;
background: #fff;
transform: translateZ(20px) scaleY(0);
padding: 40px 25px;
transform-origin: top;
transition: 0.5s;
transform-style: preserve-3d;
}
.container .box:hover .contentBx {
transform: translateZ(20px) scaleY(1);
}
Uygulama Çıktısı: