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.
[mks_highlight color=”#eeee22″]
[/mks_highlight]
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.
[mks_highlight color=”#eeee22″]
$(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 { } });});[/mks_highlight]
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.
ama sitede geçişli renkler kullanılmışsa eğer bu çalışmıyor onu nasıl halledebiliriz.