Smooth Fullscreen Page Slider Plugin with jQuery - Scroll Page

File Size: 54.6 KB
Views Total: 3912
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Smooth Fullscreen Page Slider Plugin with jQuery - Scroll Page

Scroll Page is a small jQuery plugin which allows you to scroll through content panels of your web page via mouse wheel or next/prev controls. Perfect for responsive, fullscreen one page scrolling website. 

Features:

  • Scroll snapping functionality.
  • Easing effects based on jQuery easing plugin.
  • Bottom next/prev controls.
  • Custom scroll animation speed.
  • onComplete callback functions.
  • NEW: Side dots navigation.

How to use it:

1. Include jQuery library and the jQuery scroll page plugin into your document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/lib/jquery.scrollpage.js"></script>

2. Include jQuery mousewheel plugin for mouse wheel to scroll support.

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.11/jquery.mousewheel.min.js"></script>

3. Include jQuery easing plugin for easing options.

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

4. Create the layout for the pager slider.

<div class="scroll_page">
  <div class="page first">
    <div class="content">
      <p>this is first page-1</p>
    </div>
    <div class="control"> <a href="#" class="next">Next</a> </div>
  </div>
  <div class="page second">
    <div class="content">
      <p>this is second page--2</p>
    </div>
    <div class="control"> <a href="#" class="next">Next</a> <a href="#" class="prev">Prev</a> </div>
  </div>
  <div class="page third">
    <div class="content">
      <p>this is third page---3</p>
    </div>
    <div class="control"> <a href="#" class="next">Next</a> <a href="#" class="prev">Prev</a> </div>
  </div>
  <div class="page fourth">
    <div class="content">
      <p>this is fourth page----4</p>
    </div>
    <div class="control"> <a href="#" class="next">Next</a> <a href="#" class="prev">Prev</a> </div>
  </div>
  <div class="page fifth">
    <div class="content">
      <p>this is fifth page-----5</p>
    </div>
    <div class="control"> <a href="#" class="prev">Prev</a> </div>
  </div>
</div>

5. Add the core CSS styles into your document.

.title {
  height: 80px;
  width: 100%;
  position: fixed;
  z-index: 19861107;
  text-align: center;
  font-size: 20px;
  color: #333;
  line-height: 80px;
  text-shadow: 0 1px 2px 2px #FFF;
  background: #FEFEFE;
  box-shadow: 0 4px 2px 0 #666;
}

/*SCROLL PAGE MAIN CSS*/

.scroll_page {
  position: absolute;
  top: 0;
  z-index: 19861106;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.scroll_page .page {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: relative;
  color: #FFF;
  overflow: hidden;
}

.scroll_page .page .control {
  position: absolute;
  width: 100%;
  height: 50px;
  bottom: 30px;
  left: 0;
  right: 0
}

.scroll_page .page .control a {
  position: absolute;
  width: 50px;
  height: 50px;
  line-height: 50px;
  display: inline-block;
  border-radius: 25px;
  color: #999;
  background: #FFF;
  font-size: 12px;
  text-transform: uppercase;
  text-align: center;
  opacity: 0.2;
}

.scroll_page .page .control a:hover { opacity: 1; }

.scroll_page .page .control a.prev {
  left: 20px;
  bottom: 0;
}

.scroll_page .page .control a.next {
  right: 20px;
  bottom: 0;
}

.scroll_page .page .content {
  margin: 120px auto;
  width: 300px;
  height: 80px;
  background: #EFEFEF;
  border: 1px solid #FEFEFE;
  box-shadow: 0 0 3px 1px #DDD;
  padding: 50px;
  text-transform: uppercase;
  color: #333;
  display: none;
}

.scroll_page .first { background: #26A8B8; }

.scroll_page .second { background: #0C616B; }

.scroll_page .third { background: #906894; }

.scroll_page .fourth { background: #8F8C2A; }

.scroll_page .fifth { background: #596B47; }

6. Initialize the plugin to active the fullscreen page slider.

$(document).ready(function(){
var scroll=$(".scroll_page");
scroll.find(".content").eq(0).show();
scroll.scrollpage({
  scroll_child: '.page', // child pages
  easing: '', // easing options
  next: ".next", // next control
  prev: ".prev", // prev control
  time: 1000, // animation speed
  complete: function(){ // callback
    var curr=$(".curr");
    curr.find(".content").stop(true,true).show(500,function(){
      curr.siblings().find(".content").stop(true,true).hide(800);
    });
  }
});
});

Change log:

2014-10-20

  • add scroll nav.

2014-10-19

  • add a condition that if curr scroll page has callback animate will stop scroll before complete animate event

This awesome jQuery plugin is developed by TERRILLTANG. For more Advanced Usages, please check the demo page or visit the official website.