Streaming live at 10am (PST)

Applying fullpage.js to my site (BASICS)


#1

Background: I have NO coding experience/knowledge and am new to webflow (this is my first project)

I’ve looked at several forums about this feature and copied and pasted the same code into my webflow custom code, but it didn’t work. I even tried to ensure the HTML code was correct by adding a div block called “fullpage” and then sections all labelled “section”. No luck

Can someone take a look at my project and help me add this feature and simplify the steps to do this (keeping in mind I don’t even know the basics of coding)???

Thanks

Here’s the link:
https://preview.webflow.com/preview/your-mind-matters?preview=673bc322ab233191f37e148f0bba43cb


#2

SOS… someone… anyone… help.


#3

Hi there,

Thank you so much for reaching out in regards to integrating fullpage.js into your project.

The following are the steps needed for your project.

  1. Enter “fullpage” as the ID for the element that wraps the sections
  2. Add the fullpage stylesheet into the head tag of your project
  3. Lastly, add the fullpage script and initializer into the body tag of your project.

The following is what should be entered into the head tag:
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.min.css" />

And, the following is what should be entered into the body tag:
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.min.js"></script>
<script> $(document).ready(function() { $('#fullpage').fullpage(); }); </script>

The following shortscreencapture walks you through the steps: https://cl.ly/0P160K1q2901

Hopefully this is helpful :nerd_face:


#4

I LOVE YOU. THANK YOU. LOL.

Seriously… much appreciated.


#5

Definitely, glad I could help!


#6

I have a follow up question now if you don’t mind…

I’d like to apply a similar feature to my ‘Resources’ page where I have just 1 section as a slider. I set that to 100vh and want to apply the same scrolling feature as the home page where when you scroll down it sticks to just that slider section that takes up the whole viewport height. And then when you scroll up a little it’ll show the header with a bit of that section and when you scroll down it’ll show the footer with a bit of the section (since the header and footer sections don’t take up 100vh.

Is this possible and if so… how do I do this?


#7

Hi there,

Great question, and I’m happy to help.

The javascript and CSS library needed for fullpage.js to work would extend those sections to 100vh, even if that wasn’t the size that is designated within your Designer.

Great question, but currently the fullpage.js requires 100vh.

Hopefully this is helpful :blush: