Hi! Is there anyway using code to get this movement for each section. I really liked this site. I know this type of scroll hijacking is not advised but my site is such that the background colours vary for each section. So it would really cool if the view is switched from one colour to the other which we cannot achieve on normal scroll.
It’s probably made with a javascript library called fullpage.js.
Example with Webflow:
Read-only link:
https://preview.webflow.com/preview/cards-tpl?preview=e7503d73d5be0c9ca01bb0eff953045d
The code is in custom code at page level (page settings). You need to host your own version of the library.
Instead of scroll jacking, you could put an id on each section, and have a navigation with anchor links to smoothly scroll between each section. IMO this gives you the best of both worlds.
Hi Vincent,
This is exactly what I wanted. But, I tried copy pasting the same code on to my project and it didn’t work. Is it cause I didn’t host the library like you said? (cause I don’t know how to do this). Or is there some change in the code I need to make when I paste it?
Hey @saptaruagency,
I figured out how to do this yesterday BUT I can’t figure out how to get interactions to play nicely with this implementation.
Here’s how I did it:
Head Code:
<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
Footer Code:
<script type="text/javascript" src="http://expansionscollective.com/testscripts/jquery.fullPage.js"></script>
<script> $(document).ready(function() { $('#fullpage').fullpage(); });</script>
I’ve made a clonable project for you - https://webflow.com/website/pullpage-webflow-tut
I followed this tutorial - Fullpage.js step by step set up
Thanks. It worked :))