Bilgilendirme : İçerik adresleri değişmiştir. Lütfen, aradığınız içeriği arama kutucuğundan arayınız =)

Aramak istediğiniz sözcüğü giriniz...

Java
Programlama
  • Java
  • Python
  • C++
  • C#
  • MATLAB
  • MIPS Assembly
  • PIC Assembly
Web Prog.
  • HTML
  • CSS
  • PHP
  • Javascript
Veritabanı Prog.
  • SQL
Arama Yap
İstediğin programlama dilinde sınıf, fonksiyon yada bir terimi arama alanına yaz.
Çıkan seçeneklere göz at
Seçenekler arasından senin işine yaradığı seçeneği seç.
İçeriğe göz at
Seçtiğin seçenekte yer alan örneğe bakarak bilgi edin ya da kullan.
BAKI GÜL
2020-11-17

Açıklama

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

İçeriği Paylaş
Facebook
Twitter
Google+
Linkedin
Yorumlar
Biz Kimiz ?
Java, Python, C++, C#, PHP, HTML, CSS, SQL ve MATLAB programlama dillerine ait sınıf ve fonksiyonların tanım ve açıklamalarını içeren bir websitesiyiz.
Günden güne içeriklerimizi yenileyip, arttırıyoruz.