If parallax is not working for your fullPage.js site is because the parallax effect, as well as many other plugins which depends on the scrolling of the site, listens to the scroll
event of JavaScript.
fullPage.js doesn't actually "scroll the site" as there's no actual scrollbar. fullPage.js simulates the scrolling of the page by changing the top
or translate3d
property of the page.
In order to get any third party parallax component working on fullPage.js you'll need to use the fullPage.js option scrollBar:true
(or autoScrolling:false
if you are willing to sacrify the snap effect).
For example:
new fullpage('#fullpage', {
scrollBar: true
});
Additionally, if you want to simplify things and rely on fullPage alone, you can make use of the Parallax Extension available for fullPage.js.
It is designed to create a parallax effect for the whole background of your sections and slides.
You might also find these articles relevant:
- I do not have a credit/debit card. Can I use PayPal to make the payment?
- Use fullPage responsive mode and keep snap scroll effect
- Make an element scrollable inside a fullpage.js section or slide
- Make a section scrollable in fullpage.js using scrollOverflow
- fullPage Suddenly Stopped Working And Page Broke [Solution]