Single page website made easy with fullPage jQuery plugin

INTRODUCTION

fullPage.js is fully functional jQuery plugin to create a single page webite on all modern browsers, as well as some old ones such as Internet Explorer 8, 9, Opera 12, etc. It works with browsers with CSS3 support and with the ones which don't have it, making it ideal for old browsers compatibility.

USAGE

1. Including CSS & JS

<link rel='stylesheet' href='https://cdn.rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.css'>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script src='https://cdn.rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.min.js'></script>

2. Add HTML

Each section will be defined with a div containing the section class. The active section by default will be the first section, which is taken as the home page, forexample

<div id="fullpage">
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
</div>

As in my demo, I simplified the demo from author, create a menu navigation and four sections as following:

The menu HTML:

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

The sections HTML:

<div id="fullpage">
	<div class="section active" id="section0">
		<h1>Single Page Demo</h1>		
		<img src="http://static.webpie.net/files/11/images/web68-logo-small.png" alt="web68" />
	</div>
	<div class="section" id="section1">
	    <div class="slide active">
			<div class="intro">
				<h1>Create Sliders</h1>
				<p>Not only vertical scrolling but also horizontal scrolling. With fullPage.js you will be able to add horizontal sliders in the most simple way ever.</p>				
			</div>
		</div>
	    <div class="slide">
			<div class="intro">
				<img src="http://static.webpie.net/files/11/images/web68-logo-small.png" alt="web68" />
				<h1>Simple</h1>
				<p>Easy to use. Configurable and customizable.</p>
			</div>
		</div>
	    <div class="slide">
			<div class="intro">
				<img src="http://static.webpie.net/files/11/images/web68-logo-small.png" alt="web68" />
				<h1>Cool</h1>
				<p>It just looks cool. Impress everybody with a simple and modern web design!</p>
			</div>
		</div>
	    <div class="slide">
			<div class="intro">
				<img src="http://static.webpie.net/files/11/images/web68-logo-small.png" alt="web68" />
				<h1>Compatible</h1>
				<p>Working in modern and old browsers too! IE 8 users don't have the fault of using that horrible browser! Lets give them a chance to see your site in a proper way!</p>
			</div>
		</div>
	</div>
	<div class="section" id="section2">
		<div class="intro">
			<h1>Easy to use plugin</h1>
			<p>HTML markup example to define 4 sections.</p>
			<img src="http://static.webpie.net/files/11/images/web68-logo-small.png" alt="web68" />
		</div>
	</div>

3. Call the JS for initialization

$(document).ready(function() {
	$('#fullpage').fullpage({
		sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
		anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
		menu: '#menu',
		css3: true
	});
});

DEMO

See the Pen Single page with fullPage.js by Thanh Nguyen (@genievn) on CodePen.

Recent Post