Sihirli Fasulyeler
Yükleniyor...
Sayfa Geçiş Animasyonları
 Web-Tasarım   715   19.12.2017   0
sayfagecisi.jpg

Bu makalemde, özellikle küçük boyutlu websitelerde kullanılan ve görselliği önemli ölçüde geliştiren sayfa geçiş animasyonlarından bahsetmek istiyorum. Bu sistemde, websitesinde yer alan bütün sayfalar, sitenin açılışında yüklenmektedir. Bu yüzden büyük boyutlu sayfalarınız varsa, bu sistemi kullanmanızı önermem. Aksi takdirde websitenizin açılış süresi oldukça uzayabilir.

 

Tasarladığımız uygulama buraya tıklayarak ulaşabilir ve inceleyebilirsiniz.

 

Tasarımı buraya tıklayarak bilgisayarınıza indirebilirsiniz.

 

Sistemimizin çalışma mantığı şu şekilde : Websitemizi oluşturan sayfaların CSS pozisyon değerlerini "absolute" yaparak, istediğimiz gibi hareket ettirebiliyoruz. İlk aşamada sadece anasayfa olarak belirlediğimiz sayfayı kullanıcıya gösteriyoruz. Diğer sayfaları bazı "transform" metotlarıyla gizliyoruz. Menüde yer alan "label" elemanlarımıza tıklandığında, tıklanan eleman ile ilişkilendirilen sayfamızı JQuery ile animasyonlu bir şekilde kullanıcıya gösteriyoruz.

 

HTML Yapımız

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sihirli Fasulyeler - Sayfa Geçiş</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
</head>
<body>
<div id="temel">
    <div id="menu">
        <ul>
            <li><label id="label1">Sayfa 1</label></li>
            <li><label id="label2">Sayfa 2</label></li>
            <li><label id="label3">Sayfa 3</label></li>
            <li><label id="label4">Sayfa 4</label></li>
        </ul>
    </div>
    <div id="sayfa1" class="sayfalar"><h1>Sayfa 1</h1></div>
    <div id="sayfa2" class="sayfalar"><h1>Sayfa 2</h1></div>
    <div id="sayfa3" class="sayfalar"><h1>Sayfa 3</h1></div>
    <div id="sayfa4" class="sayfalar"><h1>Sayfa 4</h1></div>
    <div id="alt"></div>
</div>
</body>
<script>
$(function(){
    $("label").on("click",function(){
        var  i = $(this).attr("id").slice(5,7);
        $(".sayfalar").css({"transform":"scaleX(0)"});
        $("#sayfa" i).css({"transform":"scaleX(1)"});
    });
});
</script>
</html>
 

CSS Yapımız

 
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{overflow:hidden;}

ul{
    display: flex;
    height: 80px;
    list-style: none;
    justify-content: center;
    align-items: center;
}

ul li label{
    padding: 5px;
    border:1px solid #666;
    margin:3px;
    font-size: 18px;
    cursor: pointer;
    background: #fff;
}

#temel{
    width: 100%;
    height: 100vh;
    position: relative;
}

#menu,#alt{
    position: absolute;
    height: 80px;
    background: #666;
    width: 100%;
}

#menu{left:0;top:0;}
#alt{left:0;bottom:0;}

.sayfalar{
    position: absolute;
    width: 100%;
    height: calc(100% - 160px);
    overflow-y: scroll;
    left:0;
    top:80px;
    transform: scaleX(0);
    transition: all .5s ease;
}

#sayfa1{background:#f8f8f8;transform: scaleX(1);}
#sayfa2{background:#eee;}
#sayfa3{background:#ccc;}
#sayfa4{background:#BEBEBE;}

h1{
    width: 100%;
    padding: 15px;
    text-align: center;
}
 

Tasarımımızın videosunu aşağıdan izleyebilirsiniz.

 

 

 Bu konuyu paylaş

 

 Konuyu geliştirmemize yardımcı ol, konuyu değerlendir.
 İlk Sen Değerlendir

 

 Yorum yaz, soru sor, geliştirme öner
E-Posta adresiniz yayınlanmayacak.

 

 İlk Yorumu Sen Yap