FoldScroll

0
198
Görüntülenme

FoldScroll

Justin Windle  tarafından  geliştirilen  FoldScroll uygulaması  sayfa kaydırma çubuğu ile hareket eden 3D görünümlü web sayfaları  hazırlamanızı sağlıyor. Demo örneğinde genişlik oldukça küçük ayarlandığı için pek ilgi çekici bir yanı yok gibi. Eğer tam ekran genişlikte  ayarlayıp sayfalarınızı yada yazılarınızı yerleştirirseniz ortaya benzersiz bir site tasarımı çıkacaktır. FoldScroll  bir content slider (içerik kaydırıcı) değil de web sitesi şablonu olarak hayal ederseniz eminim bir sürü mükemmel çalışma ortaya çıkarabilirsiniz.

Temel Kullanım

  • Head etiketleri arasına eklenmesi gereken bölümler.

Js ve Css dosya  adresleri : 

JavaScript : 

  •  Body  etiketleri  arasına eklenmesi gereken bölüm.

Html : 

Quotes.js  içinde  author  ve quote  satırlarını kendinize  göre  uyarlamayı  unutmayın.

Örnek quote.js içeriği

Burada  sadece  yazı  tanıtım amaçlı olarak hazırlanmış  olan bölümler bulunuy0r. quote kelimesi p elementi  ile author kelimesi  ise em elementi ile ilişkilendirilmiş.

Kodları iyice incelerseniz ilişkilendirme olayının nasıl yapıldığını anlayabilirsiniz. Bu eklentiyi  resim tanıtım yada  galeri  tarzı  örnek olarak  kullanmak isteyenler  olur  diye  src  elementinide yerleştirdim. Download  sayfasından edineceğiniz dosyaların içinde  bu  özellik yok.

Yukarıdaki kodda  dikkat ederseniz src elementinin resim kelimesi ile ilişkilendirildiğini  farkedeceksiniz. Resim eklemek için quotes.js dosyasının içine aşağıdakikodu  dahil etmeniz  gerekiyor.

Örnek : 

Author, quote ve resimleri  aynı  anda  kullanabilmek için quote.js  dosyası içindeki  kodların aşağıdaki  gibi olması gerekiyor.

Sayfa  çok  uzun olmasın diye  sadece  iki bölüm ekledim. Bu bölümleri istediğiniz kadar  çoğaltabilirsiniz. Aşağıdaki download  butonundan  src elementinin eklendiği örneği indirebilirsiniz.

 

Destekleyen  tarayıcılar : Cherome, Safari, Firefox.

Opera ve İnternet Explorer  üzerinden incelediğiniz  zaman Css3 perpective  desteklemediğinden dolayı 3D görünüm yok ama yukarıçıkan çerçevelerde gölge  efekti görünüyor.

 

CEVAP VER

Lütfen yorumunuzu yazın.
Lütfen İsminizi bu alana yazın.