Curtain.js – Kaydırma Çubuğu ile Hareket Eden Çerçeveler

Curtain.js  eklentisi  kaydırma  çubuğu ile hareket  eden websayfaları  hazırlayabilmeniz  için Victor Coulon tarafından geliştirilmiş bir jQuery uygulamasıdır.  Curtain.js  olmazsa olmaz  dediğim  örneklerden  olmasa  bile   tek başına  bir  web sayfasına farklı  bir  görünüm kazandırabiliyor. 

Siz  kaydırma çubuğunu  aşağı indirdiğinizde  ekranda  görünen çerçeve yukarı doğru  normal bir şekilde  kayar  ve altında  başka  bir çerçeve görünür.  Üst  çerçeve  tam olarak  kaybolmayana  kadar da  altta  bulunan çerçeve  hareket  etmiyor. Çerçevelerin illa tam  ekran olması gerekmiyor. İsterseniz web sayfası içinde 200 metrelik bir çerçeve oluşturun kaydırma  çubuğu ile sona  geldiğinizde  yine  aynı  şekilde arkasında diğer çerçeve  görünecek ve sırası gediğinde oda kaydırma  çubuğu ile beraber  hareket  edecektir.

İki  tane çerçevenin aynı anda hareket etmemesi  Curtain’in  başlıca özelliği.  Adeta  arka arkaya  çerçeveler  sıralanmış gibi  bir  parallax görünüm elde  ediliyor.  Buda websayfanızı  farklı kılmaya  yetiyor  elbette. Ayrıca  çerçeveler  arası  geçiş için klavye sağ/sol tuşlarıda kullanılabiliyor.

Kullanım

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

Js ve Css dosya adresleri : 

<link rel="stylesheet" href="../curtain.css">
<link rel="stylesheet" href="base.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../curtain.js"></script>

 JavaScript : 

<script>
    $(function(){
       $('.curtains').curtain({
           scrollSpeed: 300,
           controls: '.menu',
           curtainLinks: '.curtain-links',
           nextSlide: function(){
            console.log("ok");
           }
       });
    });
</script>

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

Html : 

<ol class="curtains">
    <!--<li id="section-1" class="cover" data-parallax-background="-.05">-->
    <li id="section-1" class="cover">
        <header data-fade="550" data-slow-scroll="3">
            Bölüm 1
        </header>
    </li>
    <li id="section-2">
        <article>
            Bölüm 2
        </article>
    </li>
    <li id="section-3">
        <section class="photos">
            Bölüm 3
        </section>
    </li>
    <li id="section-4">
        <section class="download">
            Bölüm 4 
        </section>
    </li>
</ol>

Demo  sayfası  şu anda  çalışmıyor. İleriki zamanlarda geliştirici  tarafından  eğer demo  eklenirse görebileceksniz. Bu yüzden  alternatif   olarak Curtain.js kullanan bir kaç tane web sitesini de  aşağıda sıraladım. Bu sitelere bakarakta  uygulamanın  örneklerini inceleyebilirsiniz.

• sports.espn
• womenandtech
• iconic-furniture