pagePilling.js sayfa kaydırma efekti

26.10.2014
ilketkinlik
4381

pagePilling.js ile hazırladığınız sayfalara kaydırma özelliği ekleyebilirsiniz. Yatay veya dikey olarak seçtiğiniz animasyonla kaydırabilir, detaylı ayarlama yaparak sayfalarınızı dikkat çekici hale getirebilirsiniz.

Sayfa kaydırma eklentisini buradan indirebilirsiniz.

Uyumluluk

pagePilling.js tüm modern tarayıcılarla uyumlu olup, IE8, IE9 ve Opera 12 gibi eski tarayıcılarada destek vermektedir. CSS3 desteği sunan ve sunmayan bazı tarayıcılarda da çalışması bu eklentiyi bu ekletinin seçilmesini ideal duruma getirmektedir.

Akıllı telefon ve tablet gibi dokunmatik ekranlı aygıtlarda da çalışma özelliğine sahiptir.

Kullanımı

Bu eklentiyi çalıştırmak için jquery.pagepiling.js ( ya da küçültülmüş hali jquery.pagepiling.min.js ) script dosyası ve jquery.pagepiling.css stil dosyasnı ve jquery script dosyasını sayfamıza eklenmesi gerekiyor. Opsiyonel olarak daha farklı efektlerin sayfa kaydırılmasında kllanılmasını isterseniz jQuery UI kütüphanesini ekleyip kullanabilirsiniz.

<link rel="stylesheet" type="text/css" href="jquery.pagepiling.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.pagepiling.js"></script>

Yukarıda bulunan satırların eklenmesinden sonra aşağıdaki html yapısını body etiketleri arasına section class'ını div etiketlerine ekleyerek bölümlerimizi oluşturuyoruz. Bu bölümler sayfa içerisinde yatay veya dikey olarak kaydırılacak bölümleri oluşturacaktır.

<div id="pagepiling">
     <div class="section">Bölüm 1</div>
     <div class="section">Bölüm 2</div>
     <div class="section">Bölüm 3</div>
     <div class="section">Bölüm 4</div>
</div>

Bu eklentinin tanınabilmesi için $(document).ready fonksiyonu içersinde eklentiyi çağırarak çalışır hale getiriyoruz.

$(document).ready(function() {
 $('#pagepiling').pagepiling();
});

Daha detaylı bir şekilde ayarlama yaparak çalıştırmak içinse;

$(document).ready(function() {
 $('#pagepiling').pagePiling({
  menu: null,
  direction: 'vertical',
  verticalCentered: true,
  sectionsColor: [],
  anchors: [],
  scrollingSpeed: 700,
  easing: 'swing',
  loopBottom: false,
  loopTop: false,
  css3: true,
  navigation: {
   'textColor': '#000',
   'bulletsColor': '#000',
   'position': 'right',
   'tooltips': ['section1', 'section2', 'section3', 'section4']
   },
  normalScrollElements: null,
  normalScrollElementTouchThreshold: 5,
  touchSensitivity: 5,
  keyboardScrolling: true,
  sectionSelector: '.section',
  animateAnchor: false,

  //event fonksiyonları
  onLeave: function(index, nextIndex, direction){},
  afterLoad: function(anchorLink, index){},
  afterRender: function(){},
  });
});

Menu ekleme

Menu eklemesini yapabilmek içinse sayfa içerisine aşağıdaki satırların eklenmesi gerekiyor.
$(document).ready fonksiyonu içindeki menu satırına menu oluşturmada kullandığınız id bilgisini ekledikten sonra aşağıdaki satırlar eklenmelidir.

<ul id="menu">
  <li data-menuanchor="sayfa1" class="active"><a href="#sayfa1">Sayfa 1</a></li>
  <li data-menuanchor="sayfa2"><a href="#sayfa2">Sayfa 2</a></li>
  <li data-menuanchor="sayfa3"><a href="#sayfa3">Sayfa 3</a></li>
</ul>

Yukarıda bahsettiğimiz tüm parçaları bir araya getirdiğimizde sayfamız aşağıdaki gibi bir yapı oluşturacaktır. Siz olması gereken bölümleri uygun içerikle doldurarak sayfayı amacına uygun hale dönüştürebilirsiniz.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ilketkinlik.com/blog</title>
  <link rel="stylesheet" type="text/css" href="jquery.pagepiling.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.pagepiling.js"></script>
 <script type="text/javascript">
   $(document).ready(function() {
     $('#pagepiling').pagepiling({
       menu: '#menu',
       anchors: ['page1', 'page2', 'page3'],
       navigation: {
        'textColor': '#f2f2f2',
        'bulletsColor': '#ccc',
        'position': 'right',
        'tooltips': ['Page 1', 'Page 2', 'Page 3', 'Page 4']
        }
       });
    });
</script> 
</head>
<body>
 <ul id="menu">
   <li data-menuanchor="page1" class="active"><a href="#page1">Sayfa 1</a></li>
   <li data-menuanchor="page2"><a href="#page2">Sayfa 2</a></li>
   <li data-menuanchor="page3"><a href="#page3">Sayfa 3</a></li>
</ul>

  <div id="pagepiling">
     <div class="section" id="section1">
         <h1>pagePiling.js</h1>
     </div>
  <div class="section" id="section2">
     <div class="intro">
         <h1>Arkaplanlar</h1>
         <p>Tam ekran gösterimi!</p>
     </div>
  </div>
  <div class="section" id="section3">
     <div class="intro">
         <h1>Harika!</h1>
         <p>Resimlerin gücünü kullanın.</p>
     </div>
  </div>
 </div> 
</body>
</html>

Eklentinin kendi sayfazını ziyaret edip, oradan değişik örnekleride incelemek isterseniz buradan ilgili sayfaya ulaşabilirsiniz.