HTML5 ile Açılışta Logo Animasyonu Yapmak

HTML5 ile Açılışta Logo Animasyonu Yapmak

Sitenizin açılışında logonuzun belirip kaybolduğu güzel bir animasyon çalışması yapmaya ne dersiniz?

Sitenizin açılışında logonuzun belirip kaybolduğu güzel bir animasyon çalışması yapmaya ne dersiniz?

Bir müşterimiz HTML5 olarak yaptığımız sitesi için açılışta logom sabit bir zeminde görünüp kaybolabilir mi diye talepte bulundu. Bundan yola çıkarak yaptığımız çalışmayı burada paylaşmanın işe yarayacağını düşündüm. Belki ileride biz de tekrar kullanmak istediğimizde o kadar çok aramayız :)

Yaptığımız şey şu:

Sitenin açılışında belirlediğimiz tam ekran arkaplan rengi üzerinde tam ortada logomuz görünür. Birkaç saniye göründükten sonra sitemiz açılır.

ÖRNEK İÇİN TIKLAYINIZ.

HTML kodlar:

<div id="ana" style="display:none;">

  <div id="icorta">    

    <img src="logo.png">    

  </div>

</div>

<div>

     <p>Sanalkurs.net</p>

     <p>Bir müşterimiz HTML5 olarak yaptığımız sitesi için açılışta 
logom sabit bir zeminde görünüp kaybolabilir mi diye talepte bulundu. 
Bundan yola çıkarak yaptığımız çalışmayı burada paylaşmanın işe 
yarayacağını düşündüm. Belki ileride biz de tekrar kullanmak 
istediğimizde o kadar çok aramayız :)</p>

</div>

JavaScript Kodları:

<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script src="jquery.blockUI.js"></script>
<script>
$(document).ready(function() { 
        $.blockUI({ 
            message: $('#ana'), 
            css: { 
                top:  ($(window).height() - 400) /2 + 'px', 
                left: ($(window).width() - 400) /2 + 'px', 
                width: '0px',
                opacity: 1
            },
            overlayCSS : {
                opacity: 1
            }
        }); 
setTimeout($.unblockUI, 2000); 
});         
</script>

CSS Kodları:

body {
    background-color: #666;
    color: white;
}
.blockOverlay{
    background-color:#2C4271 !important;
}
.blockMsg {
    border: 0px !important;
}
#ana {
    width: 100%;    
    margin-top: auto;
    margin-bottom: auto;
    height: 400px;
    margin-right: auto;
    margin-left: auto;
    position: absolute;
    top: 50%;
    /*margin-top: -200px;*/ /* yüksekliğin yarısı */
    text-align: center;
    background-color: #2C4271;
}

#icorta {
    height: 400px;
    width: 400px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}

Kolay gelsin. Hakan Taşkın'a çok teşekkürler...


Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Aradığım şey buydu :)

Yukarı Git