Using PagePiling with Webflow is simple.
- Start by creating a DIV with ID 'pagepiling'
- Within the DIV create several sections with the class 'section'
- Make these sections height:100vh
- Add this code inside <head> tag
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/pagePiling.js/1.5.6/jquery.pagepiling.css" />
- Add this code before <body> tag
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pagePiling.js/1.5.6/jquery.pagepiling.min.js"></script>
<script>
$(document).ready(function() {
$('#pagepiling').pagepiling();
});
</script>
You can customize this more, eg with anchors, scrolling speeds and menu navigation by looking at the GitHub here https://github.com/alvarotrigo/pagePiling.js/
Tags from Webflow:
fullpagejs, fullpage, full page, fullpage slider, pagepiling, slides
The best Webflow projects handpicked & delivered.
We search the entire Webflow showcase to find the most clone-worthy websites. The kind of sites that make you say "wait... this is free?"
Unsubscribe anytime. No spam.
Booyah! The first newsletter will go out early next week.
Oops! Something went wrong while submitting the form.
0 Comments