Sihirli Fasulyeler

Sayfa Geçiş Animasyonları

Web-Tasarım 2524 19.12.17 19.12.17 0

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.