LoginGet started — it’s free
Made in Webflow

PagePiling with Webflow (FullPage JS Free Alternative) Cloneable

Clone in Webflow222
Joe Brindle's avatar
by Joe Brindle
2.2k
site profile thumbnail

Description

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/

Feeling inspired?

If this Made In Webflow site sparked some inspo, why not get started on a project of your own? Clone a site, purchase a template or start building from scratch.
fullpagejsfullpagefull pagefullpage sliderpagepilingslides

More by Joe Brindle

See profile
View details
Recreating the Rider 404 website in Webflow without any code
8
24
© 2022 Webflow, Inc. All rights reserved.