Javascript Vanilla TiltJS ile 3D animasyon

2 Yıl önce

Açıklama

Merhabalar, bugünkü uygulamamızda javascript vanilla framework 'u ile animasyon yapımı için gerekli adımları anlatacağım.

İlk olarak index.html ve style.css dosyalarımızı oluşturalım
https://raw.githubusercontent.com/micku7zu/vanilla-tilt.js/master/dist/vanilla-tilt.js Yandaki linkteki javascript kodunu index.html ve style.css ile aynı dizinde olacak şekilde kaydedelim.

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ı: