jQuery Plugin To Create Fullscreen Scrolling Website - fullPage

fullPage is a powerful, multipurpose jQuery & jQuery UI plugin to create a fashion one page fullscreen scrolling website with snapping functionality.

Features:

• CSS3 transitions and easing effects supported.
• Arrows, dots, anchor lins navigation.
• Auto resize to fit the different screen sizes.
• Auto scroll back to the first slide when you reach the last slide.
• Callback events supported.

Examples to find out more usages:

• Basic
• Background images
• Auto scroll back
• Callbacks
• Navigation menu
• Right navigation
• iPhone 5S/5C website

Basic Usage:

1. Load the jQuery and jQuery UI libraries in the Html document.

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

2. Load the jQuery fullpage plugin's javascript and stylesheet files after jQuery library.

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

3. Markup html structure.

<div class="section">
	<h3>Slide 1</h3>
	<p>fullPage.js Basic Demo</p>
</div>
<div class="section">
	<div class="slide"><h3>Slide 2 Item 1</h3></div>
	<div class="slide"><h3>Slide 2 Item 2</h3></div>
	<div class="slide"><h3>Slide 2 Item 3</h3></div>
</div>
<div class="section">
	<h3>Slide 3</h3>
</div>
<div class="section">
	<h3>Slide 4</h3>
	<p>Last slide</p>
</div>

4. Call the plugin on document ready and set the background color for the sections.

<script>
$(document).ready(function() {
$.fn.fullpage({
slidesColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90']
});
});
</script>

5. All the configurations.

<script>
$(document).ready(function() {
$.fn.fullpage({
verticalCentered: true,
resize: true,
slidesColor: [],
anchors: [],
scrollingSpeed: 700,
easing: "easeInQuart",
menu: false,
navigation: false,
navigationPosition: "right",
navigationColor: "#000",
navigationTooltips: [],
slidesNavigation: false,
slidesNavPosition: "bottom",
controlArrowColor: "#fff",
loopBottom: false,
loopTop: false,
loopHorizontal: true,
autoScrolling: true,
scrollOverflow: false,
css3: false,
paddingTop: 0,
paddingBottom: 0,
fixedElements: null,
normalScrollElements: null,
afterLoad: null,
onLeave: null,
afterRender: null,
afterSlideLoad: null,
onSlideLeave: null
});
});
</script>

---

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