Fullpage.js step by step set up

I really need some help with an easy way to set up fullpage.js

Ideally a simple step by step guide would be very helpful.

I have looked through the forums and found similar topics but they seem to be more about the issues faced after installed and not the actual set up.

Any help would be greatly appreciated

J

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 :slight_smile:

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.

14 Likes

his seems to be working better than mine.

Mine worked… but had some issues that I cannot remember.

whoa thats pretty smooth. Great job! :smiley:

1 Like

I hope WF will update the slider widget with horizontal and event that will enable us target slides natively in the August drop. Nevertheless, good one.

Amazing! Thank you so much.

I envisioned this being really difficult but you have helped me out in 2 very easy steps :slight_smile:

Going to see what I can come up with now thank you once again!

Good one @EvanJones!

Though the link to the css is a relative path.
One may use this to link to the Github repo instead,

https://cdn.rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.css

Additionally, here’s the link to the Github repo for the FulPage JS file,

https://cdn.rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js

Replace the URLs as necessary.

@Reply - yeah good point, forgot to mention that the URLs in my example were relative paths.

Cheers for clarifying :slight_smile:

Could you help me on this? What does this mean? Do I need to replace the urls in the codes? many thanks

@johndvv Follow what @EvanJones has posted above. The URLs I provided are alternatives.
So your eventual Header code would be this:

<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.css" />

And the Body code would be this:

<script type="text/javascript" src="https://cdn.rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script><script>$(document).ready(function() { $('#fullpage').fullpage(); });</script>
2 Likes

Don’t suppose anyone can help out with inputting a navigation on the page to scroll between sections? They have one in the demo of the apple layout which is dots and circles. I really like this style. Any help would be much appreciated :slight_smile:

1 Like
 $('#fullpage').fullpage({
  verticalCentered: false
});

should avoid this behavior.

2 Likes

Nice work! Is there any way to get interactions work with this scrolling?

1 Like

I second @Evgeny_Troitsky , Anyone help out with interactions and also site navigation dots for each section.

1 Like

Anyone know why I can’t disable full page.js in tablet or mobile views. The site didn’t work as well this way but when I hide the full page section, it still interferes.

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.

Hi @EvanJones, do you still have the fullpage.js example available? I tried the link you posted but wasn’t able to find it.

I found this example: http://fullpagejs.webflow.io/ (Read only: https://preview.webflow.com/preview/fullpagejs?preview=7540b0f1b6c9d6aad7e8268c4d16f29f)

Any help would be great! TIA :slight_smile:

1 Like

Hey @thewonglv - i didn’t save my original example unfortunately…i’ll have another play later this week though: was there anything specifically you were interested in seeing?

@johndvv - think i might have a solution for disabling FullPageJS on mobile. Replace your link to the FullPage script with the below:

<script>if (screen && screen.width > 480) { document.write('<script type="text/javascript" src="https://cdn.rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"><\/script>'); } </script>

The only thing that you really need to pay attention to is the first line “screen width > 480”. Basically the script will only load FullPage if the viewport is wider than 480 pixels. You can change the number to make sure it doesn’t load on tablets either (i think the tablet breakpoint is 991px on Webflow).

Hope this helps

1 Like

Tryin to follow all the instructions, but it doesn’t work…Actually, after adding custom code scroll is off. Sorry for my poor English)) Maybe the instructions offered need some upgrade? Any help would be great :slight_smile: