jQuery Backstretch ile Tam Sayfa Arkaplan Resimleri

Yükleniyor

jQuery Backstretch ile tam sayfa arkaplan resimleri
Website geliştirirken server taraflı kodlamamız kadar client taraflı kodlama da çok büyük önem taşıyor. Kullanıcıların göreceği, kullanacağı arayüzün göze hoş gelmesi, kullanıcıyı yormaması; bu kullanıcının sitemize tekrar dönme ihtimalini epey yükseltiyor.

Son dönemlerde sayfanın tamamını kaplayan arkaplan resimleri ve bu arkaplanın üzerinde sade tasarımlı elementler oldukça populer. Örneğin Twitter’ın giriş ekranı bu akıma önemli bir örnek.

Twitter arkaplan resmi
resmi büyütmek için resme tıklayabilirsiniz

Peki tam sayfa ya da bir dom element’inin tamamını kaplayan arkaplan resmini en kolay şekilde nasıl yapabiliriz?

Responsive arkaplan eklentisi: Backstretch.js

Kullanımı oldukça kolay olan bu jQuery eklentisi ile dün karşılaştım ve çok hoşuma gitti. Backstretch ile tek satır kodla tüm sayfaya/bir elemana arkaplan resmi vermek ve bu resmin ekran boyutuna göre kusursuz şekilde yayılması en önemli özellikleri.

Backstretch Kullanımı

jQuery ve Backstretch kütüphanesini sayfanıza ekleyin.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>

ve Backstretch’i çağırın:

$.backstretch("resim/adresi.jpg");

Farklı Kullanım Yolları

Tüm sayfa yerine bir elemana arkaplan verme

$("div.arkaplan").backstretch("resim/adresi.jpg");

Arkaplanda slideshow gösterme
Backstretch’e resim url’lerini bir array ile verin ve arkanıza yaslanın.

$(".slideshow-container").backstretch([
    "resim/urlsi1.jpg",
    "resim/urlsi2.jpg",
    "resim/urlsi3.jpg"    
  ], {duration: 4000});

Slide geçişlerinde efekt kullanma.
Bir önceki örnekten yola çıkarak slideshow’unuzu ayarlayın ve “fade” değerine numerik ya da “slow”, “fast” gibi jQuery hız sabitlerinden birini verin.

$.backstretch([
    "resim/urlsi1.jpg",
    "resim/urlsi2.jpg",
    "resim/urlsi3.jpg"    
  ], {duration: 4000, fade: "slow"});

Kapanış

Backstretch kütüphanesi ile çok şık yönetim panelleri, giriş sayfaları, tanıtım bölümleri hazırlamak mümkün. Bu jQuery kütüphanesi hakkında daha fazla bilgi için eklentinin Github sayfasını ziyaret edebilirsiniz.

Soru, görüş ve önerilerinizi, yazının altındaki yorum alanından yazmayı unutmayın.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir