One Page Scroll sections using fullpage.js in Genesis

This tutorial provides the steps to set up One Page Scroll sections on the front page using fullpage.js in Genesis Sample.

You can see fullpage.js in live demo.

The idea:

1. Create a widgetized front page
2. Enqueue fullpage.css and fullpage.js
3. Add Required classes in each container
4. Enqueue fullpage-init.js script
5. CSS styles for fullpage and front page

Prerequisite:

1. Create a css and js (added by default) folder in your child theme.
2. Download fullpage.js zip and copy fullpage.css in /css/ folder and fullpage.js in /js/ folder of your child theme. You can use the minified version of both files.
3. Create front-page.css (in /css/) and fullpage-init.js (in /js/) to the relative folder. We will use these two files to add customizations.

Remember, We are working on the front page only.

STEP 1

The first step is to remember a few points to make fullpage scrolling work.