Sayfa aşağı kaydıkça değişen arkaplan rengi [HTML5+JQuery]

Kişisel bir blog sahibiyseniz veya kafanızda farklı ilginç, renkli projeleriniz varsa bu yazımda paylaşacağım kodlar tam size göre diyebilirim. Aşağıda paylaşacağım kodlar ile sitenizin arkaplan rengini aşağı indikçe değiştirebilirsiniz. Aşağıda anlatacağım şekilde adımları takip ederek mousenuz ile aşağı scrool ettikçe sitenizin arkaplan renginin değiştiğini göreceksiniz.

Site arkaplan rengi değiştirme kısmına geçecek olursak;

Öncelikle sitenize jQuery ve jQuery Color kodlarını ekliyoruz. Bu sayede dışarıdan kütüphaneleri çağırarak kodlarımızın sitede sorunsuz çalışmasını sağlayacağız. Kütüphaneleri dışarıdan çağırmak istemiyorsanız indirip, kendi sunucunuza yükleyipte çağırabilirsiniz.

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

Yukarıdaki kodları sitemizin header kısmına ekliyoruz. Daha sonra aşağıdaki kodları sitemizin footer kısmına ekledikten sonra işlemimiz tamamdır.

$(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 { }
    });
});

 

Dilerseniz body kısmına daha önceden renk verip aradaki farkı kolayca ayırt edebilirsiniz. Eğer yukarıdaki kodların sitede çalışır halde incelemek isterseniz aşağıdaki bağlantıya tıklayabilirsiniz.

Canlı Önizleme

Bu yazımı sonlandırıyorum fakat isterseniz bir önceki yazım olan Facebook Sayfası Nasıl Doğrulanır? başlıklı konuda yer alan "facebook, facebook remi sayfa doğrulaması ve facebook sayfa doğrulama terimleri hakkında kaliteli bilgiler bulabilir, arkadaşlarınız ile paylaşabilirsiniz.