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

Implementing Client-Side Form Validation using JavaScript

Forms are an essential element of web development. They allow users to submit information and interact with web applications. However, users can sometimes make mistakes or input incorrect data, which

Implementing Lazy Loading of Images on a Web Page

As more and more websites become image-heavy, web developers are constantly looking for ways to optimize page load times without compromising the user experience. One of the most effective methods of

How to Handle Errors in Asynchronous JavaScript Code

Asynchronous JavaScript code is becoming more and more prevalent in modern web applications. However, asynchronous code can be tricky to debug and maintain, especially when it comes to handling errors

Javascript Mülakat Soruları ve Cevapları

JavaScript mülakatları genellikle adayların dilin temel kavramlarını, işlevleri, obje yönelimli programlama, asenkron programlama ve diğer ilgili konuları anlayıp anlamadığını ölçmek için kullanılır.

JavaScript Array: Diziler Hakkında Her Şey

JavaScript'de dizi, farklı veri tiplerindeki öğeleri depolamak için kullanılan bir veri yapısıdır. Diziler, özellikle programlama ve web geliştirme alanında oldukça yaygın bir şekilde kullanılır. Bu y

JavaScript Array: Diziler Hakkında Bilmeniz Gerekenler

JavaScript, web geliştirme alanında en sık kullanılan programlama dillerinden biridir. Bu dil, özellikle değişkenlerin ve veri yapılarının kullanımı konusunda oldukça esnektir. Bu esneklik, JavaScript

JavaScript Fetch Kullanımı ve Örnekleri

JavaScript, web uygulamaları ve sayfaları oluşturmak için en yaygın kullanılan programlama dillerinden biridir. Birçok web uygulaması, sunucudan veri almak için HTTP istekleri gönderir. JavaScript'te

Javascript parseint kullanımı

JavaScript parseInt() fonksiyonu, bir dizeyi belirtilen sayı tabanına göre tamsayıya dönüştürür. parseInt() fonksiyonu, bir dize içindeki sayısal değerleri alır ve bunları bir tamsayıya dönüştürür. Bu

Javascript ne demek?

JavaScript, web sayfalarını dinamik hale getirmek için kullanılan bir programlama dilidir. JavaScript, HTML ve CSS ile birlikte kullanılarak, kullanıcı etkileşimli web sayfaları oluşturmak için kullan