To integrate fullpage.js (a popular JavaScript library for full-screen scrolling) into Webflow, follow this step-by-step setup.
1. Add fullpage.js Files
- Go to the fullpage.js website: https://alvarotrigo.com/fullPage.
- Use CDN links for the free version. Copy both the CSS and JS CDN URLs.
- In Webflow, go to Project Settings > Custom Code tab.
- Paste the CSS
<link> inside the Head Code section. - Paste the JavaScript
<script> before the closing Tag field. - Click Save Changes and Publish your project.
2. Structure Your Sections in Webflow
- Go to your project in the Webflow Designer.
- Create one parent div (or section) and give it a unique ID, like
fullpage. - Inside this wrapper, create multiple divs (or sections), each one representing a slide/section.
- Assign each inner section the class section (required by fullpage.js).
3. Set Section Styling
- Set each
.section to have 100vh height and width: 100%. - Make sure there is no default padding or margins in your body and html elements.
- You can design each section however you like (backgrounds, text, images, etc.).
4. Initialize fullpage.js
Go to Page Settings for the page you’re using fullpage.js on.
Scroll to Before tag under Custom Code.
Add the initialization script, like:
``
Replace #fullpage with the ID of your wrapper div.
5. Publish and Test
- Publish your site to staging or custom domain.
- Scroll the page; it should now snap between full-page sections.
- If it does not work, confirm:
- Your section container has the correct ID.
- Inner sections have the proper section class.
- JavaScript was added before the closing
</body>.
Summary
To set up fullpage.js in Webflow: add the CDN files, structure your page with an ID wrapper and section divs, style sections to fill the screen, and initialize fullpage.js via custom code.
