Fullscreen websites are everywhere, and it’s highly likely that you’ll wind up making at least one if you’re a web designer. I was building one myself not long ago, and I realized there weren’t any jQuery plugins to make this easier. So, I made my own (fullPage.js) and open sourced it. In this tutorial I’ll show you how to create a basic full-screen scrolling website using fullPage. Live demo
Create the basic structure of the page
Before doing anything else, we have to create our basic HTML structure for the page. This is the same for all sites except for the DOCTYPE tag, which might change.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Be careful, don’t forget to add the DOCTYPE or you might have some problems.
Include the needed files
We’ll need to add four files: – jQuery – jQuery UI (Or its animation effects, at least.) – fullPage.js – fullPage’s css file
You can include them between the <head> tags of the page, although some people prefer to add the JavaScript files just before the closing </body> tag to improve content loading times. I wouldn’t recommend it in this case as this plugin sets the structure of the page and, unless it’s applied the content, it won’t look as expected.
Let’s add the files I named in the order detailed in the official documentation:
<DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="vendors/jquery.easings.min.js"></script>
<script type="text/javascript" src="jquery.fullPage.min.js"></script>
</head>
<body>
</body>
</html>
Be careful, the order in which you include them is important. fullPage.js plugin requires the jQuery library to work and unless you include it before the plugin, it won’t be able to work.
Required HTML structure
Once we’ve included our files we can start adding our content in the <body> section of our site. fullPage works with vertical sections and horizontal slides. To use them, we’ll have to use the classes section and slide, respectively. (Although they’re configurable if you need.)
The plugin’s structure needs to be wrapped in another element which will be used later to initialize the plugin. For our example, we will use a wrapper with id="fullpage".
A site with 3 vertical sections would have this structure:
<div id="fullpage">
<div class="section">Section 1</div>
<div class="section">Section 2</div>
<div class="section">Section 3</div>
</div>
But to make it a bit more interesting, we are going to add also some horizontal slides in the 2nd section. It’s as simple as this:
<div id="fullpage">
<div class="section">Section 1</div>
<div class="section">
<div class="slide">Section 2 Slide 1</div>
<div class="slide">Section 2 Slide 2</div>
<div class="slide">Section 2 Slide 3</div>
</div>
<div class="section">Section 3</div>
</div>
Our file looks like this now:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="vendors/jquery.easings.min.js"></script>
<script type="text/javascript" src="jquery.fullPage.min.js"></script>
</head>
<body>
<div id="fullpage">
<div class="section">Section 1</div>
<div class="section">
<div class="slide">Section 2 Slide 1</div>
<div class="slide">Section 2 Slide 2</div>
<div class="slide">Section 2 Slide 3</div>
</div>
<div class="section">Section 3</div>
</div>
</body>
</html>
Initialization
Now that we have all we need, lets initialize the plugin to make the magic happen. To do so, we will need to add a <script> element in the header of our site. Just after the inclusion of all the needed files:
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage();
});
</script>
We’ve used the most simple initialization, but the plugin provides plenty of options you can configure as you can see in the official documentation.
As you can see, we’ve added the plugin initialization inside the ready function of jQuery. This is where most of the plugins get initialized as they need the structure of the page to be completely generated to start working with it.
Here’s the result of our current file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="vendors/jquery.easings.min.js"></script>
<script type="text/javascript" src="jquery.fullPage.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage();
});
</script>
</head>
<body>
<div id="fullpage">
<div class="section">Section 1</div>
<div class="section">
<div class="slide">Section 2 Slide 1</div>
<div class="slide">Section 2 Slide 2</div>
<div class="slide">Section 2 Slide 3</div>
</div>
<div class="section">Section 3</div>
</div>
</body>
</html>
Ready to work
And that’s it! We have our full-screen page working. You can save the changes in an .html file and open it in any browser to see the result.
You might notice the text isn’t horizontally centered and it’s quite small, but you can solve this by applying some of your CSS knowledge.
.section{
font-size: 6em;
text-align: center;
}
Also, you may want to add some background color to each section. To do so, we can use the option sectionsColor provided in the plugin. It’s as simple as modifying our initialization to look like this:
$('#fullpage').fullpage({
sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke']
});
Now it is going to look amazingly beautiful! Here’s our final .html file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="vendors/jquery.easings.min.js"></script>
<script type="text/javascript" src="jquery.fullPage.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
});
});
</script>
<style>
.section{
font-size: 6em;
text-align: center;
}
</style>
</head>
<body>
<div id="fullpage">
<div class="section">Section 1</div>
<div class="section">
<div class="slide">Section 2 Slide 1</div>
<div class="slide">Section 2 Slide 2</div>
<div class="slide">Section 2 Slide 3</div>
</div>
<div class="section">Section 3</div>
</div>
</body>
</html>
Additional information
Linking sections and slides
It is as simple as using the URL when using the anchors option: For example: http://alvarotrigo.com/fullPage/#secondPage/2
You can do it by using the index of the slide (starting by 0), or if you prefer, you can create custom anchor links for them by using the attribute data-anchor in each slide. For example:
<div class="section">
<div class="slide" data-anchor="slide1"> Slide 1 </div>
<div class="slide" data-anchor="slide2"> Slide 2 </div>
<div class="slide" data-anchor="slide3"> Slide 3 </div>
<div class="slide" data-anchor="slide4"> Slide 4 </div>
</div>
Be careful! data-anchor tags can not have the same value as any ID element on the site (or NAME element for IE).
Methods
$.fn.fullpage.moveSectionUp();
$.fn.fullpage.moveSectionDown();
$.fn.fullpage.moveTo(section, slide);
$.fn.fullpage.moveSlideRight();
$.fn.fullpage.moveSlideLeft();
$.fn.fullpage.setAutoScrolling(boolean);
$.fn.fullpage.setAllowScrolling(boolean);
$.fn.fullpage.setKeyboardScrolling(boolean);
$.fn.fullpage.setScrollingSpeed(700);
$.fn.fullpage.destroy(type); (type = all or empty)
$.fn.fullpage.reBuild();
Callbacks
onLeave: function(index, nextIndex, direction){},
afterLoad: function(anchorLink, index){},
afterRender: function(){},
afterResize: function(){},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
onSlideLeave: function(anchorLink, index, slideIndex, direction){}
More information
You can find more information about it in the official documentation or in the author’s blog.
Author: Alvaro