MENU

Sayfa Aşağı İndikçe Arkaplan Rengi Değiştirme

Anasayfa » CSS / CSS3 » Sayfa Aşağı İndikçe Arkaplan Rengi Değiştirme
Sayfa Aşağı İndikçe Arkaplan Rengi Değiştirme

Önceleri rooteto.com da böyle birşey yapma planım vardı. Localhostum da denedim de sonra bu sitede olmaz ya deyip kenara sakladığım arkaplan rengi değiştirme özelliğini sizlerle paylaşmak istiyorum. Belki kişisel bloglarda yada tanıtım sayfalarında güzel olabilir.

Belki sitenin arkaplanı değil de belirli bir kutunun sürekli rengini değiştirebilirsiniz. Dikkat çekmek için iyi bir seçim olabilir :)

Site Arkaplan Rengi Değiştirme kısmına geçelim.

Sayfamıza jQuery ve jQuery Color kütüphanelerini yüklüyoruz.

Kodlarımız;

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type='text/javascript' src='http://code.jquery.com/color/jquery.color-2.1.0.js'></script>

Daha sonra alttaki kodları hangi sayfada çalışmasını istiyorsak orada en alta koyabiliriz. Tüm sayfalarda çalışacaksa, footer.php içerine koyabilirsiniz. Daha sonra

$(document).ready(function(){ 
    var scroll_pos = 0;
    var animation_begin_pos = 0; //where you want the animation to begin
    var animation_end_pos = 1000; //where you want the animation to stop
    var beginning_color = new $.Color( 'rgb(210,50,98)' ); //we can set this here, but it'd probably be better to get it from the CSS; for the example we're setting it here.
    var ending_color = new $.Color( 'rgb(0,197,209)' ); ;//what color we want to use in the end
    $(document).scroll(function() {
        scroll_pos = $(this).scrollTop(); 
        if(scroll_pos >= animation_begin_pos && scroll_pos <= animation_end_pos ) { // console.log( 'scrolling and animating' ); //we want to calculate the relevant transitional rgb value var percentScrolled = scroll_pos / ( animation_end_pos - animation_begin_pos ); var newRed = beginning_color.red() + ( ( ending_color.red() - beginning_color.red() ) * percentScrolled ); var newGreen = beginning_color.green() + ( ( ending_color.green() - beginning_color.green() ) * percentScrolled ); var newBlue = beginning_color.blue() + ( ( ending_color.blue() - beginning_color.blue() ) * percentScrolled ); var newColor = new $.Color( newRed, newGreen, newBlue ); //console.log( newColor.red(), newColor.green(), newColor.blue() ); $('body').animate({ backgroundColor: newColor }, 0); } else if ( scroll_pos > animation_end_pos ) {
             $('body').animate({ backgroundColor: ending_color }, 0);
        } else if ( scroll_pos < animation_begin_pos ) {
             $('body').animate({ backgroundColor: beginning_color }, 0);
        } else { }
    });
});

Son olarak birde body’e renk vermemiz gerekiyor.

body {
    background-color: rgb(210,50,98);
}

Hepsi tamamdır sayfamız artık aşağı indikçe renklenicek :) Üstte body etiketini görürsünüz bunu eğer belirli bir dive vermek isterseniz onun classı veya id’sini verebilirsiniz. Aynı şekilde cssde de düzenleme yapmanız gerekiyor.

Birde bunu jsFiddle‘de çalışır halini görün bende oradan alıp size anlattım.

Rooteto Teknoloji Blogu

Rooteto WordPress, Sosyal Medya, Teknoloji, HD Resimler ve Video paylaşımında bulunan bağımsız olarak çalışan online haber teknoloji sitesidir.

Yaklaşık 1 Milyondan fazla tekil aylık ziyaretci ile Rooteto'yu büyük yapan teknoloji topluluklarıdır. 2009 yılında kurulan Rooteto'nun genel merkez ofisi İzmir / Bornova'dadır.