However, they do not work in tandem. I think it would be sweet if they did.
The background is a 100vh 100vw fixed div with a negative z-index and it changes colour using IX2.0.
The fullPage scroll is set up - currently commented out the custom code above the tag.
So at this point the background colour works but not the scroll. If you uncomment out the code the fullPage scroll will work but the colour does not change. Frustrating.
Can anyone be a hero and shed some light?
Share link below. BE AWARE: Iām working on the page called āHome 2ā.
Removing the height of āBackground Colorā
Removing the position so it is no longer fixed
Putting the Full Page Wrap div inside of the Background Color div
@roblewi5 While fullpage.js is easy to implement, I constantly run into issues like this. There is a known issue with FP.JS interfering with scroll interactions. You cannot apply interactions directly to the fullpage or section divs.
What Iāve done as a work around is to put another div inside of the section and have it fill the w and h of the section. You should be able to interact with this new div or elements inside of it.
So in your case, instead of changing the background color of a single element with the scroll trigger, try having the scroll trigger fade between different colored bkgd fixed divs inside each sectionās new inner div. Adjust the timing on the opacity fade to hopefully get close to a āwhile scrolling triggerā.
Let me know if that helps or if you have further questions.
I tried that previously but set the Full Page Wrap height to 100vh and position to fixed.
I tried again and it didnāt work. Annoyingly, i canāt get the fullPage scroll to work at all now so itās hard to say whether this didnāt work or not.
I understand what youāre saying but I canāt get it to work. Iāve tried using a While Scrolling In View element trigger to get the opacity of the Sectionsā fixed Background Colour Div to fade as scroll out.
Just have strange results. I.e. the next sectionās Background Colour Div is misaligned and thereās no opacity fade at all. https://www.twoupdigital.com/home-2
Unless iām doing this wrong (please suggest a better technique if so) or just have to resign that fullPage affects the scrolls triggers too much.
Would you mind making the project cloneable so I can copy and paste your setup into my own project and play around with it? That way I could publish and test on my own site. If you donāt want to I totally understand!
Itās frustrating as thereās potential for some amazing effects.
Thereās another jquery one here: jQuery Scrollify - Power steering for your scroll wheel
Maybe doesnāt effect the IX2.0 scroll interactions as much.
Appreciate your efforts!
Rob
Perfect!! All it took was a different js haha. I would suggest playing with the easing and scroll speed though. I like the smoothness of the fullpage.js more than scrollify. Too snappy you know? But glad you got it man!
Well the problem for fullpage is right in the name, itās a āFull Pageā. You donāt ever actually scroll. If you look on the right there is no scrollbar because the wrapper with the ID fullpage is set to 100vh with overflow: hidden in the script. The scroll trigger doesnāt move you down the page it just moves content towards you. Thatās why āWhile scrollingā animations donāt work, you never actually move But if you look at the scrollify example on home-3 there is a scroll bar meaning the way he made the snap scrolling was with the intent of actually scrolling down the page rather than moving content around your viewport.
But if you look at the scrollify example on home-3 there is a scroll bar meaning the way he made the snap scrolling was with the intent of actually scrolling down the page rather than moving content around your viewport.