jQuery full screen pages made easy – fullPage.js

Create full-screen pages easy and fast with fullPage.js – a jQuery full screen pages plugin.

jQuery full screen pages solution

FullPage.js is a simple and easy to use plugin, to create scrolling websites (single page / one page websites). It allows the creation of fullscreen scrolling websites, as well as adding some landscape sliders inside the sections of the site.

Compatible with 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.

Fullpage.js also provides touch support for mobile phones, tablets and touch screen computers.

Easy jQuery full screen pages with fullPage.js plugin
Easy jQuery full screen pages with fullPage.js plugin

Usage

We can install it bower or npm:

bower install fullpage.js

npm install fullpage.js

Include files:

jQuery (1.6+)

jquery.fullPage.min.js

jquery.fullPage.css

We can also use CDN.

Required HTML structure

Prepare a structure in HTML5 document.

<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>

Define starting point / active section:

<div class="section active">Some section</div>

Initialization of the plugin:

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

We can adjust a lot of options and events – take a look on documentation.

Creating links to sections or slides is pretty easy, simply define:

$(document).ready(function() {
    $('#fullpage').fullpage({
        anchors:['firstPage', 'secondPage', 'thirdPage']
    });
});

Notes:

– There is also WordPress theme

– Warning! Make sure to use at least version 2.7.6. A dangerous security issue has been found in previous versions!

License: MIT

Demo:

http://alvarotrigo.com/fullPage

GitHub:

https://github.com/alvarotrigo/fullPage.js

See also:

CSS3 fullscreen background image slideshow – a tutorial

CSS3 and jQuery single page scrolling plugin – singular.js

SingleJS – a jQuery plugin for single page websites

Enjoy!

Share:Share on Facebook1Share on Google+1Tweet about this on TwitterShare on LinkedIn0Pin on Pinterest1