Cloneable Fullpage.js - Ready for code improvements

Design help Custom code
1

Iv added a cloneable fullpage.js page with scroll interactions for whoever wants to clone and improve upon. (from Github fullpage.js)
I haven’t used the full initialization but it can be explored by other Webflow users and it would be awesome if people will add in their own cloneable versions.

Some of tricky parts that dont seem to work or work well are -

  1. scrollBar: false, - Which is needed to make Webflow’s scroll interactions work, but makes the scroll bar visible and users can control it which kinda ruins the whole fullpage effect.

  2. onLeave: function(index, nextIndex, direction){}, afterLoad: function(anchorLink, index){}, afterRender: function(){}, afterResize: function(){}, afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){}, onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
    Which are meant to solve the issue of using the interactions of parallax with fullpage.js

  3. normalScrollElements: '#element1, .element2', - how to make sure they dont cause the pages to skip.

  4. Creating smaller or bigger sections with fp-auto-height option.

  5. How to slow down scrolling speed of mouse-wheel when scrolling over the normalScrollElements

2 Likes
2

Thanks for this clone, I used it to start playing with fullpage.js on my portfolio site. Some things I added for my simple 3 section site.

Here is the webkit css I used to “hide” the scrollbar;

<style>
::-webkit-scrollbar
{
  width: 0px;  /* for vertical scrollbars */
  height: 0px; /* for horizontal scrollbars */
}

::-webkit-scrollbar-track
{
  background: rgba(0, 0, 0, 0);
}

::-webkit-scrollbar-thumb
{
  background: rgba(0, 0, 0, 0);
}
</style>
1 Like
3

Hi @crafts_co thank you!
Works like a charm.

Any suggestions for the normalScrollElements?
Something similar to this ?

4

Hey @Nir I can’t say yet - haven’t had a chance to get a working example but try searching in the fullpage.js github issues page. Theres something close utilized from the fullpage.js creator here in jsfiddle; with more about it posted in this issue.

7

Great stuff! Thanks for sharing.

8

Hi mate, webflow clonable link is down. could you update it please?
Thank you