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...


Siraceddin El
1999 yılından bu yana web tasarımcı olarak yurt içinde ve yurt dışında sayısız projede yer aldı. 2002 yılında Sanalkurs.net'i kuran ekiptendir. Etkinlik.com.tr'nin de kurucularındandır. Girişimci, tasarımcı ve eğitmen olarak çalışmalarını sürdürmektedir.
Yorum Yaz

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

Aradığım şey buydu :)

Yukarı Git