Hi Guys,
Please take a look at my read only site: https://preview.webflow.com/preview/blackbrook-asset-management?preview=b1eabc7694f79eae67c5b02c259d2720
I would like the site to snap to each section when user scrolls. I have searched and continue to come across ‘fullPage.js | One Page Scroll sections Site Plugin ’ but struggling to implement to the site.
Any help here would be greatly appreciated, especially as the hero area of my site would rely on this otherwise users will scroll past content.
Looking forward to any fixes.
Regards
Darren
Here is my site Read-Only: https://preview.webflow.com/preview/blackbrook-asset-management?preview=b1eabc7694f79eae67c5b02c259d2720
(how to share your site Read-Only link )
Check out this project
https://webflow.com/website/typed-js?s=typed-js#
It has implemented Type.js and fullpage.js which you can clone and start from there or copy the code and paste it into your project.
1 Like
Thanks for the reply Aaron. Unfortunately the Fullpage.js code is in the project settings custom code and the only way to access that is to clone the project and add hosting?
Any other ideas how to grab it?
Cracking project BTW.
Thanks
You don’t need to add hosting to the project to access the code, you can just go to the Custom code section and copy it from there.
Thats what I tried, and there is custom code within the designer side however the fullpage.js code is in the project side (see screen grab attached).
Unless I am missing a trick, I cannot access without adding hosting.
Thanks Aaron.
I think as my account is on ‘starter’ and I have individual hosting for each of my projects I cannot access the custom code in the project settings.
Would it be possible for you to copy and paste the code into this feed?
Many thanks, appreciate your help.
Darren
Oh I see!
Here you go:
Head code:
<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
<script type="text/javascript" src="/js/jquery.fullPage.js"></script>
Before body code:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.1/jquery.fullPage.js"></script>
<script>
$(document)
.ready(function () {
$('#fullpage')
.fullpage({
anchors: ['p1', 'p2', 'p3', 'p4', 'p5'],
menu: '#menu',
responsiveWidth: 720,
scrollingSpeed: 850,
//Scrolling
css3: true,
autoScrolling: true,
fitToSection: false,
fitToSectionDelay: false,
scrollBar: true,
easing: 'easeInOutCubic',
easingcss3: 'ease',
animateAnchor: true,
loopBottom: true,
loopTop: false,
loopHorizontal: true,
continuousVertical: true,
continuousHorizontal: false,
scrollHorizontally: false,
interlockedSlides: false,
resetSliders: false,
fadingEffect: true,
normalScrollElements: '#somesectionsID',
scrollOverflow: false,
scrollOverflowOptions: true,
touchSensitivity: 5,
normalScrollElementTouchThreshold: 15,
bigSectionsDestination: null,
/*My additions below this point*/
showActiveTooltip: true,
});
});
</script>
Hope that helps
1 Like
Many thanks Aaron - I will have a play and see if I can get this working.
Regards.
Darren
2 Likes
Eivinj
(Eivind Brækkan Engstad)
October 11, 2020, 12:42pm
10
Hey, this looks very helpfull, as the project contains multiple smart functions.
However; i experience a small “lag” or “jitter” as i scroll in the page, does anyone else experience this?