Web Sayfasinda Arkaplan Resmi Backstretch Kullanmak

Bu makalemizde Jquery Backstretch Pulign kullanarak web sayfamıza değişecek şekilde  arkaplan resmi veya video eklemenin nasıl yapıldığını analatmaya çalışacağım.

Bunun için Jquery Backstretch Pulign (eklentisi) kullanacağız. Backstretch, herhangi bir sayfaya dinamik olarak yeniden boyutlandırılmış, slayt gösterisi özellikli  bir arka plan resmi eklemenize imkân tanıyan bir jquery eklentisidir. Görüntü, sayfaya göre sığacak şekilde genişletilecek ve pencere boyutu değiştiğinde otomatik olarak yeniden boyutlandırılacaktır.

Şimdi jquery backstretch pulign kullanarak bir arka plan kaydırıcısı oluşturmak için;

Github dan eklentiyi indirerek index.html dosyanızın body taglarının kapanışından önce aşağıda ki şekilde kaydediniz.

<script src="js/jquery-3.2.0.min.js"></script>                                                                     <script src="js/jquery.backstretch.js"></script>                                                                

Eklentiyi indirmek istemiyorsanız Jquery Cdn sini head tagları arasına aşağıda ki şekilde ekleyebilirsiniz.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">             

</script>

Arka plan görüntülerini de aynı klasör içine ekleyiniz.

Son olarak da script etiketleri arasında js kodunu aşağıda ki şekilde sayfanızın en altına body nin kapanışından önce ekleyiniz.

Script etiketleri arasında backstretch fonksiyonu ile  resimlerin, sürenin ve slaytın fade parametresi nin aşağıda ki gibi belirtilmesi gerekir

<script>

            $.backstretch([

                "sample2.jpg",

                "kediler.png",

                "meyva.jpg"

            ], {

                fade: 750,

                duration: 4000,

               

            });

</script>

Örnek dosyamız aşağıda görülmektedir.

Kaynak Kodları: İNDİR

Backstretch Slayt Örneği