How can I implement fullpage.js code on my website using Webflow?
- Design individual sections for scrolling using fullpage.js and integrate the script and stylesheet via "Page Settings" in Webflow.
- Initialize fullpage.js with a custom code embed, wrapping sections in a div with ID "fullpage"; ensure each section is a direct child and customize styles in Webflow's Designer.
To integrate fullpage.js into your Webflow project, you'll need to use a combination of custom code and Webflow's embedding capabilities. Here’s a step-by-step guide to help you get started.
1. Prepare Your Webflow Project
- Design your sections: Ensure that each section on your Webflow page is designed as an individual element that can be scrolled to using fullpage.js. These will typically be your main content blocks.
2. Add fullpage.js to Your Project
- Go to the "Pages" panel: Select the page where you want to implement fullpage.js.
- Open "Page Settings": Click on the gear icon next to the page name to open the settings.
- Include fullpage.js script:
- Paste the following inside the "Before </body> tag" area:
```javascript
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js"></script>
```
- Add CSS for fullpage.js in the "Inside <head> tag" area:
```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.css" />
```
3. Initialize fullpage.js
- Go to the "Designer": Open your page in Webflow’s Designer view.
- Add a Custom Code Embed:
- Drag an "Embed" component onto your page from the Add panel.
- Insert the fullpage initialization code inside the Embed component:
```javascript
<script>
new fullpage('#fullpage', {
autoScrolling: true,
navigation: true
});
</script>
```
- Wrap your sections in a div: This div should have an ID of "fullpage" to match the initialization code.
4. Final Adjustments
- Set the parents: Ensure each section that should act as a fullpage slide is a direct child of the element with ID "fullpage".
- Style your sections accordingly: Sections in fullpage.js take full-screen height by default. You may want to adjust padding or other styles in Webflow’s Designer.
Summary
By adding the fullpage.js script and stylesheet to your Webflow project and initializing it correctly, you can create smooth-scrolling, full-page sections. Ensure that all intended fullpage sections are direct children of the div with the ID "fullpage" and configured properly in Webflow’s Designer.
