Javascript Vanilla TiltJS ile 3D animasyon

17 Kasım 2020

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

Yorumlar

Bu gönderi için yorum yapılmadı.