Home » Development » Fullpage.js / enhance SlimScroll to detect visible content for animations
When using Fullpage.js, overflowing section / slide content will be made scrollable with Slimscroll. If you want to use addons that rely on the natural scroll event, these will fail with Slimscroll. One of the candidates breaking is Scrollreveal.js for example.
I decided to work around that, to allow animations to be triggered when elements become visible or invisible to the viewport.
You could code the viewport visibility check yourself or use the “visible” jquery plugin.
“This is a jQuery plugin which allows us to quickly check if an element is within the browsers visual viewport, regardless of the scroll position. If a user can see this element, the function will return true.” jquery-visible on Github
The idea was to extend or hook into slimscroll without touching the fullpage.js codebase. Fullpage.js wraps overflowing content within a fp-scrollable container. Slimscroll itself provides events to track your position within the scrollable area in pixels or when top / bottom have been reached.
This is just a crude and simple starting point, but should give you the basic idea. This still needs some throttling, so that its not called on every scroll position.
Very basic idea to get some transitions working.
Hopefully Fullpage.js will be switching to iScroll natively in the future, as it provides far more options to handle scrollable areas. You can use iScroll now, but you have to disable the scrolling feature within Fullpage.js and call iScroll yourself. Not that difficult to do :)
There is also a WordPress Plugin that wraps Fullpage.js natively with a nice interface (WP_Fullpage) and my upcoming Visual Composer integration, which already uses iScroll :)
Alexander Gräf
Portfolio
Book Me
Get in touch
Live Chat
I am a full-stack developer. My expertise include:
I love programming, design and know my way around server architecture as well. I would never feel complete, with one of these missing.
I have a broad range of interests, that’s why I constantly dive into new technologies and expand my knowledge where ever required. Technologies are evolving fast and I enjoy using the latest.
Apart from that, I am a peace loving guy who tries to have people around him that think the same. I truly believe in the principle: “If you help someone, someone will help you, when you need it."