Fullpage.js set up

[domo (Dominick)]

Continuing the discussion from Fullpage.js step by step set up:

@EvanJones

Hey John

I had a quick go at this & got it working: http://full-page-js.webflow.io/

Here’s how I got it to work:

01 - SET-UP

Go to the custom code tab of your site overview and add the Full Page CSS Stylesheet to the Header Code Section

<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />

Next, Add the Full Page JS file & the script to initialize it to the Footer Code section

<script type="text/javascript" src="http://expansionscollective.com/testscripts/jquery.fullPage.js"></script>
<script> $(document).ready(function() { $('#fullpage').fullpage(); });</script>

…and thats your set up done!

02 - CREATING YOUR SECTIONS

First create a div and give it the ID “fullpage” in the settings pane.

Add another div inside of the “fullpage” div and give it the class “Section”.

Add as many divs as you need (all with the same class & within your master “fullpage” div) and put your content in them…if you need to add specific styles (background colors for specific sections etc) just add an additional nested class to the section div and style it to your hearts content.

And you’re done!

There are a ton of options for adding nav menus, altering scrollspeed etc via jQuery so its always worth looking over the documentation on Github to customise to your needs: GitHub - alvarotrigo/fullPage.js: fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple

Have fun

PS. I noticed that adding top/bottom padding to your section divs does wierd things when you publish it. Although it will look odd while you’re creating in webflow, try not to add any internal padding - Full Page JS will automatically center your content vertically on your published site.

Hello @EvanJones,

This was a great post! Originally, I was able to create the fullpage site, but for some reason when I recreated it the second time around it stop working. Here’s a link to the read-only site…would you have any suggestions for me to get it working again? I was originally able to make it work with both the original script you posted and the script @Reply posted.

https://preview.webflow.com/preview/fullpagejs-841efd?preview=b45b2cbd8efb14226795f52bc38e4c85

Thanks!
Dom

[EvanJones]

Hey Dom

Sure thing - be happy to help here.

Can you share the published page with me too, just so I can look at the custom code? Can’t quite figure out what is going wrong from the read-only preview

cheers
Evan

[domo (Dominick)]

Sure Evan, thank you! Here’s the link:

http://fullpagejs-841efd.webflow.io/

It really has me stumped. lol

-Dom

[domo (Dominick)]

Hello @colinadallimore,

I actually could not get it to do what I wanted it to do, so I scraped it. If I decided to use the fullpage.js script again and find any new info out…I’ll def let you know! Sorry about that.

Best,
Dom