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 : 

<link href="https://fonts.googleapis.com/css?family=Croissant+One|Freckle+Face" rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css">	
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="js/foldscroll.js"></script>
<script src="js/quotes.js"></script>

JavaScript : 

<script type="text/javascript">
  $(function() {
    var limit = 15;
      var $container = $( '.quotes' );
        // Populate
        for ( var i = 0, n = Math.min( limit, quotes.length ); i < n; i++ ) {
         $container.append(
            '<article>' +
            '<p>' + quotes[i].quote + '</p>' +
            '<em>' + quotes[i].author + '</em>' +
			'</article>');
         }
        // Call the foldscroll plugin
        $container.foldscroll({
        perspective: 1200,
        margin: '400px',
		shading: 'rgba(0,0,0,0.9)'
    });
  });
</script>

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

Html : 

<section id="info">
</section>

<section class="quotes">		
</section>

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

Örnek quote.js içeriği

var quotes = [
    {
        "quote": "buraya  yazar ismi",
	"author": "buraya icerik ismi"

    },
    {
        "quote": "buraya  yazar ismi",
	"author": "buraya icerik ismi"

    }
]

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

         $container.append(
            '<article>' +
            '<p>' + quotes[i].quote + '</p>' +
            '<em>' + quotes[i].author + '</em>' +
			'</article>');
         }

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.

         $container.append(
            '<article>' +
            '<p>' + quotes[i].quote + '</p>' +
            '<em>' + quotes[i].author + '</em>' +
            '<src>' + quotes[i].resim + '</src>' +
			'</article>');
         }

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 : 

         "resim": "<img src='https://www.mintik.com/wp-content/uploads/2012/11/banner-mintik.png' width='390'/>"

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

var quotes = [

    {
        "author": "Yazar",
        "quote": "Yazı",
         "resim": "<img src='resim url adresi buraya' width='390'/>"
   },
    {
        "author": "Yazar",
        "quote": "Yazı",
         "resim": "<img src='resim url adresi buraya' width='390'/>"
   },   
]

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.