Fullpage.js step by step set up

Hello. I´m trying to do something similar to http://fullpagejs.webflow.io/ but it just won´t work.

This is my public link https://preview.webflow.com/preview/axionconstruct?preview=0c8148576658a5b6338085f0ffd379c3

And this is the link http://axionconstruct.webflow.io/

I did as @Reply said but It just doesn´t work.

Can anyone help?
tks

hi @dguerra, thanks for the info. It seems the issue is that those sections on your page are nested inside of a section instead of a div block. Change this so that the sections are inside of a div block, with an id of “fullpage”.

Drag a new div under the menu, then drag the three sections into the div. Delete the old section and give the new div an id of “fullpage”.

Republish site, check result. This seemed to work for me, and I am standing by for your result :slight_smile:

1 Like

Hi

I’m trying to use the ‘scrolloverflow’ feature of the fullpage.js but I’m having a little trouble getting it to work, does anyone have any advice?

I have the following in my footer code, and have changed the scrolloverflow to true in the main fullpage.js
I’ve read online in other forums that the slimscroll.js plugin is necessary and I’ve noticed by inspecting some websites where this is implemented that they also use the scrolloverflow-min.js. I have very limited knowledge of coding and even adding custom code so any help would be very much appreciated!! :slight_smile:

Footer code:

<script type="text/javascript" src="http://yourjavascript.com/65051118551/jquery-fullpage-min.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/31563121568/jquery-fullpage.js"></script>
<script>$(document).ready(function() { $('#fullpage').fullpage(); });</script>

<script type="text/javascript" src="http://yourjavascript.com/16271811555/scrolloverflow-min.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/11116514328/jquery-slimscroll.js"></script>

I figured it out, if you’d like to implement Scrolloverflow within sections of your fullpage.js use the following code in your Custom Footer code:

<script type="text/javascript" src="http://yourjavascript.com/68012104180/iscroll.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/31563121568/jquery-fullpage.js"></script>
<script>$(document).ready(function() { $('#fullpage').fullpage(); });</script>

Any idea how to use interactions that load in each section?

I followed these instructions exactly, but the scrolling is not working. Here is my share link

https://preview.webflow.com/preview/test-fullpage-e96534?preview=371f092898c5cc17764108e919710963

code added to custom code section:
http://screencast.com/t/xqUQuxXOx

Thanks @EvanJones for your step by step on this.
@cyberdave I am not having any success getting this to work for some reason. I see you have helped others with this, mind taking a look at mine here? Thanks

Scott

Sometimes when I scroll DOWN it scrolls UP.
Does anybody else have this problem?

http://peder-test.webflow.io/

https://preview.webflow.com/preview/peder-test?preview=e4b15e09618fdde97a08bbf9c5a0416f

EDIT: Nevermind, clumsy fingers.

Someone know how to stop the fullpage.js effect after first section? Something like Huge Website: http://www.hugeinc.com/

Thanks in advance!

1 Like