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:
- Create a widgetized front page
- Enqueue fullpage.css and fullpage.js
- Add Required classes in each container
- Enqueue fullpage-init.js script
- CSS styles for fullpage and front page
Prerequisite:
- Create a css and js (added by default) folder in your child theme.
- 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.
- 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.
To view the full content, please sign up for the membership.
Already a member? Log in below or here.