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

site arkaplan rengi degistir

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

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.

jQuery ile Youtube Benzer Videoları Kaldırma 0

Merhabalar bugün sizlere rahatsız olduğunuz bir olaydan kurtulmanın yolunu göstericem. Web sitenize Youtube videosu eklediniz ziyaretci bu videoyu izledikten sonra diğer videolara dalıp Youtubeye gidebilir veya Kurumsal bir firmasınızdır video bittiğinde benzer videolar çıkmasını istemezsiniz vs. vs. herkezin zevki isteği farklıdır.

https://4.bp.blogspot.com/-vQMMXk8qFWk/UYa08qohrSI/AAAAAAAARFk/oRhLVTg9LvQ/s1600/YouTube-updated-video-final-screen%5B4%5D.png

Gelelim konumuza jQuery ile Youtube videosunu izledikten sonra web sitenizde video bittikten sonra çıkan benzer videoları kaldırıcaz.

Remove related videos from YouTube videos using jQuery

Altta vermiş olduğum kodu web sitenizde body kısmında en alta ekleyin tamamdır. Geri kalanı o yapıyor 🙂

$(document).ready(function () {
    $('iframe[src*="youtube.com"]').each(function () {
        var sVideoURL = $(this).attr('src');
        if (sVideoURL.indexOf('rel=0') == -1) {
            $(this).attr('src', sVideoURL + '?rel=0');
        }
    });
});

Basit Youtube Açılır Menü Ücretsiz indir 0

Bugün gördüğüm güzel bir açılır menü kaydettim sizlerle paylaşmak için. Youtube’de bu tarz bir menü olduğunu söylemiş ancak ben göremedim fazla kullanmadığımdan olabilir. Her neyse sizde bu menüyü indirip deneyin çok güzel.

https://1.bp.blogspot.com/-r-GUO4hWaJ4/UXmcEVXix0I/AAAAAAAARDE/D-ThQy2VMzk/s1600/acilir-menu.jpg

Simple Youtube Menu Effect

Eğitici olarak yapılmış bir menü bu arkadaşlar. Sizde bunun nasıl yapıldığını altta verdiğim linkten araştırabilirsiniz. Çok zor bir olayı yok aslında mantığı anlatılıyor.

Ufak bir jquery fonksiyonuda var onuda çalıştırdınızmı tamamdır.

Demo / Download

Most Popular Topics

Editor Picks