Streaming live at 10am (PST)

Fullpage.js step by step set up


#1

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


How to create Full Page scrolling sections on single mouse scroll
How to setup fullpage.js? [resolved]
Fullpage with scollable sections?
Does anyone know how to create a fullscreen hero image background, that scales with the size of the screen?
3D transforms is able?
Trigger interaction with scroll
Fullpage scrolling using Fullpage.js
Scroll 100vh down for each section
Sidebar Section Navigator
Los Angeles, CA's Olympic Games bid website is BEAUTIFUL!
Need help to create custom fullscreen section, while scrolling
[Russian] Как реализовать поблочную прокрутку? Fullpage
[Russian] Как реализовать поблочную прокрутку? Fullpage
How to create Scrolling Slider with sticky Divs
Fading Effect in fullPage.js
Fullpage.js + Background video
How to let fullpage.js and scrolling interaction work together?
Reveal on Scroll
#2

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: https://github.com/alvarotrigo/fullPage.js

Have fun 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.


Fullpage.js set up
Can I get one section to scroll over another?
Page scroll effect - plug in help
Integrating Swiper for Slider Images
Trouble with 100vh on chrome while using custom fullpage.js code
Multi Directional Scrolling Website
Fullpage.js Slides down till end
#3

his seems to be working better than mine.

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


#4

whoa thats pretty smooth. Great job! smiley


#5

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.


#6

Amazing! Thank you so much.

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

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


#7

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.


Integrate fullPage.js script into custom code
#8

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

Cheers for clarifying smile


#9

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


#10

@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>

#11

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 smile


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

should avoid this behavior.


How to disable fullPage.js on Mobile?
#13

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


#14

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


#15

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.


#16

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


#17

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


#18

#19

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


#20

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