Google Tarzı Fade Efekti

Google'a ilk girdiğimizde sadece arama kutucuğu vardır ve fareyi hareket ettirdiğimizde diğer nesnelerde beliriverir Bu uygulamada onun bir benzeridir

GEREKLİ HTML KODUMUZ (Gizlemek istediğimiz nesneleri bu divin içine alın. Her yeni gizlediğiniz nesne için fade değerinde sayıyı düzenleyin.. Örn; fade1, fade2, fade3 gibi..)

<div id="fade1" class="gizle">
GİZLENEN NESNELER
</div>

GEREKLİ CSS KODLARIMIZ (Her yeni fade'i CSS'de tanımlamayı unutmayın

@media all {
    .gizle    { visibility:hidden; }
    #fade1    {}
    #fade2    {}
    #fade3    {}
}
@media  handheld {
    .gizle    { visibility:visible; }
}

GEREKLİ JQUERY KODLARIMIZ (head tagları arasına yerleştirin)

<script  src="http://code.jquery.com/jquery-latest.js"></script>
<script  type="text/javascript">
    $(document).ready(function() {
        var  doFadeIn = function() {
            $('.gizle').css({ opacity:0,  visibility:'visible'}).fadeTo(350,1);
        };
        $('body').one('mousemove',doFadeIn);
        $('#s').one('blur',doFadeIn);
    });
</script>

KENDİ HAZIRLADIĞIM DEMOYU GÖRMEK İÇİN TIKLAYIN

Film Sitemden Demo: http://www.izlemeyedeger.net

Kaynak: http://davidwalsh.name/google-fade

Bugün bana lazım oldu, yarın sizede lazım olurda bulamazsınız diye birde bu arşivlik kısma açayım istedim konuyu

Not: Teşekkürler bana değil David'e gelsin ^^

Erbilen birkaç sorum olacak mesela resimleri nasıl alabilirim bu css kodlarının içerisine?

gayet güzel hocam teşekkürler

teşekkürler erbilen

https://www.r10.net/javascript-progra...gle-tarzi.html
~ Yine de teşekkürler. =)

<div id="fade1" class="gizle">
RESİM KODU BURAYA GELSİN
</div>

yukarıdaki gibi.. Aynı şekilde yani

Tüh görmemişim ben onu Ama yinede arşivlik kısımdada olmasında sorun olmaz sanırım.

Güzel paylaşım

güzel teşekkürler

Güzel Paylaşım Teşekkürler.