I had to do one of this websites and I found out there was nothing in the jQuery plugins world to make this task easier.
In an attempt to create something to make things easier for other people trying to do the same, I've created a simple plugin which creates the basic structure and functionality to start making a fullscreen scrolling website, also known as single page website.
I've named it fullPage.js and It is available at my github account.
It's in the first version and I hope to keep improving it with the time. Right now, is capable of:
- Scroll within sections using they mouse wheel scroll
- Scroll within sections and within sliders using the arrow keys and the pageUp and pageDown keys
- Use multiple callbacks
- Use touch events for mobile and tablet devices
- Add a menu linked to to the sections
- Support for CSS3 animations with jQuery fallback
- Use of anchor links (#) for each section and slides
- Support for scrolling inside each section
- Resize the sections size as well as the text when resizing the browser's window
- Autoadjust itself to fit the current section/slide when resizing the browser's window
- Admit some options such as the scrolling easing, the background color of the slides, the scrolling speed, loop options, callbacks and the vertical align of the text within the sections
And all of this being compatible with old browsers such as Internet Explorer 8, 9, Opera 12 etc which already still being used by many users nowadays.
Creating a full scrolling website
The structure is quite simple, adding a
section class for each section of the site, and
slide for each slide within a section:
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide">Slide 4</div>
To initialise the plugin with default options, is as simple as this:
Here you have a list of some pages using this plugin.
Documentation & Questions
For more documentation about the plugin, check it at the github repository.
I encourage you to use the issues forum to report bugs or ask any question related with the plugin.
Also, don't forget to search for your question before opening a new thread as they might have been already asked previously.
The project has been growing with the time and due to the diversity of requested features I decided to provide fullpage.js extensions that can be added to enhance its behaviour.
Wordpress theme / template
The guys from Themify have created what it seems like a nice theme for wordpress. I encourage you to make use of it if you are planning to integrate fullpage.js and wordpress.
If anyone is so kind to invite me for a coffee I will appreciate it a lot :)
Join 2,000+ readers and learn something new every month!