12 Tam Ekran Arkaplan jQuery Eklentisi 0

12 Tane Tam Ekran jQuery Eklentisi hepsi birbirinden farklı ve kullanışlı eklentiler. Biliyorsunuz günümüzde artık tam ekran siteler daha çok tercih edilmeye başladı bu yüzden bunlar işinize yarayacaktır.

https://3.bp.blogspot.com/-iOQEp5uSWps/UOctbDMk_RI/AAAAAAAAOBk/t2zYJ5Fbhh8/s1600/Fullscreen-Background-jQuery-Plugins-rooteto.png

Supersized! jQuery Plugin

Epey ünlü bir eklenti olduğunu bilmeniz gerekiyor. Slayt gösterisi için en iyi eklentilerden biridir.

Bunun resmi yukarıdaki resimdir bilginize.

Demo / Download

Vegas Background jQuery Plugin

https://3.bp.blogspot.com/-pom0RKyewPQ/UOcuKQCATLI/AAAAAAAAOC8/pJHltlDSggc/s1600/jquery-background-vegas-540x303.jpg

Web siteniz için harika bir eklenti diyebilirim. İlk resim gelişi ve geçişleri herkez “İnanılmaz” olarak tanımlıyor gerçektende öyle çok güzel bir girişi ve resim geçişleri var kesinlikle kullanılır.

Demo / Download

 

bgStretcher jQuery Plugin

https://1.bp.blogspot.com/-JzAiqF8DX94/UOcthrht1DI/AAAAAAAAOCc/o0ondjR4lJw/s1600/bgStretcher.png

Arkaplan’da slayt gösterisi yapabileceğiniz bir eklenti.

Demo / Download

jQuery tubular

https://2.bp.blogspot.com/-SFSiy3QMryU/UOcth4To2hI/AAAAAAAAOCk/pH-9Aq2rB68/s1600/jQuery-tubular.png

Arkaplanda youtubeye yüklemiş olduğunuz videoyu gösterebilirsiniz. Bir arka plan video eklentisidir aslında bu. Kolayca bulunabilecek bir eklenti değildir kesinlikle bir yere kaydedin kullanmanızı tavsiye ederim.

Demo / Download

 

Backstretch jQuery Plugin

https://3.bp.blogspot.com/-MFPsYxx5Y94/UOcta9WhLSI/AAAAAAAAOBg/WfrE5R4poNM/s1600/Backstretch.png

Web siteniz için arka plan eklentisi olarak kullanabilirsiniz. Basit bir eklentidir çok bir özelliği olmasada genelde basit eklentiler daha çok kullanılır 🙂

Demo / Download

 

jQuery.videoBG Plugin

https://2.bp.blogspot.com/-HzPcYj_KHY0/UOctikztZMI/AAAAAAAAOCo/uZxriYWhUvc/s1600/jQuery.videoBG.png

HTML5 ile yapılmış kolay kullanımlı bir eklenti. İstediğiniz dive vererek kullanabilirsiniz. Arkaplana uygulayıpta kullanabilirsiniz.

Demo / Download

MaxImage 2.0 Plugin

https://3.bp.blogspot.com/-3kk_7cmxU4Q/UOcwEyOR31I/AAAAAAAAOD4/pHJFTPjCOsM/s1600/aaronvanderzwan_com_maximage_2_0.jpg

İstediğiniz şekilde kullanabileceğiniz bir eklenti. Tüm seçenekleriyle birlikte sunulmuş.  jQuery eklentilerinin tamamını rooteto’da yayınlayacağım bununda haberini siz okurken vereyim 🙂

Demo / Download

Smooth Fullscreen Background Slideshow jQuery Plugin

https://1.bp.blogspot.com/-uIBX--rP4uE/UOcteakyzWI/AAAAAAAAOCE/YQtkCaVYydo/s1600/Smooth-Fullscreen-Background-Slideshow.png

Demosuna bakarken resim gelmedi böyle grid yani piksel piksel ufak resim çıktı bir garip baktım resim gelince waav dedim girşi çok güzel geçişlerde öyle güzell 🙂

Demo / Download

Fullscreen Background jQuery Plugin

https://4.bp.blogspot.com/-YMqUFejLbXs/UOctcQ6bVsI/AAAAAAAAOBw/IFPWFyJDAs8/s1600/Fullscreen-Background.png

Firefox, Chrome, Safari ve IE 7 sürümü dahil hepsinde çalışıyor. Biliyorsunuz Internet Explorer’da her jQuery çalışmıyor Explorer kendini iyice geliştirmeye başladı ama çok geç kaldı diyebilirim.

Demo / Download

jQuery Easy Background Resize

https://4.bp.blogspot.com/-zy-E_sbofUg/UOctg4RJBbI/AAAAAAAAOCY/Ec7-7DOYdAk/s1600/jQuery-Easy-Background-Resize.png

Çok basit kullanımı olay background eklentisi.

Demo / Download

 

Full Size Background Image jQuery Plugin: Redux

https://4.bp.blogspot.com/-Ju8-Rz8HrAs/UOctaUDPyZI/AAAAAAAAOBc/a_CyhUOTQcE/s1600/Full-Size-Background-Image.png

Gene basit bir arkaplan jQuery uygulaması daha. Esnek genişlikli olması ekstra katıyor.

Demo / Download

Nice jQuery Full Background Image Slider

https://3.bp.blogspot.com/-4Ub5lJKeClI/UOctd0gXZ-I/AAAAAAAAOB4/nNbCfjRCwSY/s1600/Nice-jQuery-Full-Background-Image-Slider.png

Tam ekran içerik için yada site arka planı için kullanabileceğiniz bir jQuery eklentisi.

Demo / Download

50+ Samsung Galaxy J1 Duvar Kağıtları 1

Samsung Galaxy J1 için biirbirinden güzel ve uyumlu duvar kağıtları ile karşınızdayız. 50 tane galaxy j1 duvar kağıdı 480×800 piksel çözünürlüktedir. Galaxy J1 için tam uyumlu olan duvar kağıtlarını hemen indirin.

Çiçek, ağaç, deniz, çöl, manzara, araba, gemi ve farklı tasarımlara sahip orjinal galaxy j1 duvar kağıtları indir. İstemediğiniz kadar samsung galaxy j1 duvar kağıtları özel olarak seçilmiştir. Akıllı telefonunuzla tam uyumludur.

İLGİNİZİ ÇEKEBİLİR: Samsung Galaxy Note 5 Duvar Kağıtları

Samsung galaxy note 5 için tam uyumlu duvar kağıtları indir.

İLGİNİZİ ÇEKEBİLİR: FlatWallpapers ile En Güzel Android Duvar Kağıtlarını İndirin

En güzel duvar kağıtları indirebileceğiniz android uygulaması.

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

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

Most Popular Topics

Editor Picks