jQuery Plugin For Fullscreen One Page Scrolling Websites - fullPage.js

jQuery Plugin For Fullscreen One Page Scrolling Websites - fullPage.js
File Size: 8.1 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

fullPage.js is yet another jQuery plugin for one page website that allows you to create vertical or horizontal scrolling web page with smooth animations and easing options.

Features:

  • Not only vertical scrolling but also horizontal scrolling. 
  • Easy to use. Configurable and customizable.
  • Working in modern and old browsers too!
  • Responsive designed to fit to different screen sizes as well as tablet and mobile devices. 
  • Auto scrolling on page load
  • Supports mousewheel scrolling

You might also like:

How to use it:

1. Include jQuery and jQuery UI on your one page website

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

2. Include jQuery fullPage.js plugin after jQuery and jQuery UI included

<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
<script type="text/javascript" src="jquery.fullPage.js"></script>

3. Create the html for your one page website

<div class="section active" id="section0">
<h1>Initial Section</h1>
</div>
<div class="section" id="section1">
<div class="slide active">
<div class="wrap">
<h1>Section 1</h1>
</div>
</div>
<div class="slide">
<h1>This is an awesome plugin</h1>
</div>
<div class="slide">
<h1>Which enables you to create awesome websites</h1>
</div>
<div class="slide">
<h1>In the most simple way ever</h1>
</div>
</div>
<div class="section" id="section2">
<h1>Section 2</h1>
</div>
<div class="section" id="section3">
<h1>Section 3</h1>
</div>

4. You can also create some navigation links to scroll between sections by mouse click

<ul id="menu">
<li data-menuanchor="firstPage"><a href="#firstPage">First slide</a></li>
<li data-menuanchor="secondPage"><a href="#secondPage">Second slide</a></li>
<li data-menuanchor="3rdPage"><a href="#3rdPage">Third slide</a></li>
<li data-menuanchor="4thpage"><a href="#4thpage">Fourth slide</a></li>
</ul>

5. Call the plugin with options

<script type="text/javascript">
$(document).ready(function() {
$.fn.fullpage({
slidesColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage']
});
});
</script>

6. All the options

//navigation
menu: false,
anchors:[],
lockAnchors: false,
navigation: false,
navigationPosition: 'right',
navigationTooltips: [],
showActiveTooltip: false,
slidesNavigation: false,
slidesNavPosition: 'bottom',
scrollBar: false,

//scrolling
css3: true,
scrollingSpeed: 700,
autoScrolling: true,
fitToSection: true,
easing: 'easeInOutCubic',
easingcss3: 'ease',
loopBottom: false,
loopTop: false,
loopHorizontal: true,
continuousVertical: false,
normalScrollElements: null,
scrollOverflow: false,
touchSensitivity: 5,
normalScrollElementTouchThreshold: 5,

//Accessibility
keyboardScrolling: true,
animateAnchor: true,
recordHistory: true,

//design
controlArrows: true,
controlArrowColor: '#fff',
verticalCentered: true,
resize: false,
sectionsColor : [],
paddingTop: 0,
paddingBottom: 0,
fixedElements: null,
responsive: 0, //backwards compabitility with responsiveWiddth
responsiveWidth: 0,
responsiveHeight: 0,

//Custom selectors
sectionSelector: SECTION_DEFAULT_SEL,
slideSelector: SLIDE_DEFAULT_SEL,


//events
afterLoad: null,
onLeave: null,
afterRender: null,
afterResize: null,
afterReBuild: null,
afterSlideLoad: null,
onSlideLeave: null

Change logs:

v2.7.9 (2016-04-15)

v2.6.6 (2015-06-08)

  • ixed mousewheel for old firefox versions
  • Fixed bug with slimScroll 
  • Fixed bug when using scrollBar:true and opening a new tab (ctrl + t)
  • Added new option lockAnchors to lock anchors #1198
  • Added new option responsiveHeight 
  • Added new option responsiveWidth replacing the old option responsive
  • Added new function setLockAnchors 
  • Modified setKeyboardScrolling function to lock keyboard scrolling in specific directions
  • Added new functionality to cancel the scroll before it takes place
  • Callback onSlideLeave has now a new parameter nextIndex
  • Single slide inside section won't show navigation bullets 
  • Added a new functionality to lazy load images, videos and audio elements.
  • Added a new functionality to play and stop videos/audios when they enter in the viewport

v2.6.5 (2015-05-01)

  • Fixed bug using scrollOverflow:true and autoScrolling:false #553
  • Fixed bug using zoom (ctrl + mouse)
  • afterLoad callback will now fire on page render as well
  • Fixed bug with setAllowScrolling right and left
  • Fixed bug which fired multiple callbacks when using continuousVertical
  • Added new method $.fn.fullpage.silentMove to scroll with no animation 
  • Window resize has no animation now
  • Added npm installation to the documentation
  • Improved documentation about Creating links to sections or slides and anchors
  • Added some more comments in the code

v2.6.3 (2015-04-10)

  • Solved bug with slide anchors

2014-09-20

  • Double click over bullets on touch devices no longer needed

2014-07-01

  • Solved problem with common selectors. 

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