Streaming live at 10am (PST)

FullPage scroll AND change background colour on scroll


#1

Hi Webflow,

I am have got FullPage scroll working (https://alvarotrigo.com/fullPage/) and I have got the background to change colour as I scroll.

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’.

Published site here: http://twoupdigital.webflow.io/home-2

Rob


Here is my site Read-Only: LINK


#2

I can’t publish to actually test it but try:

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

Like this:
9a04c4ccabc2fcc1c7d8081528b560bf

14c8efc89a0de033bdc301738a10d993


#3

Hi @PHRyan,

Thanks for your help. I tried that and it’s causing the fullPage scroll to not work.
https://www.twoupdigital.com/home-2

There must be a conflict of some sorts somewhere. Any other suggestions?

Thanks

Rob


#4

Have you tried changing what the scroll action affects from “Background Colour” to the “Full Page” div?

Like this:


#5

@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.


#6

Super good to know! Hopefully there will be changes to that in the future :crossed_fingers:


#7

Hi mate.

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.

Rob


#8

Hi @matthewpmunger,

Thanks for the information! Once I get fullPage scrolling working again I’ll give your technique a go and let you know how i get on.

Rob


#9

Got scroll working again. Unfortunately, changing the BG Colour on the Full Page Wrap didn’t work. It lost colour after the first scroll.

Thanks for the idea.

Rob


#10

Hi @matthewpmunger,

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.

Rob


#11

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!


#12

Hi mate,

Sure it’s here: https://webflow.com/website/twoupdigital

I have removed the interaction unfortunately but it’s quick to re-do. Be awesome if we can work this out.

Please let me know when it’s copied and i’ll take it off showcase as it’s for the company I work for.

Rob


#13

Still not working right for me. Finding issues with each thing I try.


#14

It’s frustrating as there’s potential for some amazing effects.
There’s another jquery one here: https://projects.lukehaas.me/scrollify/
Maybe doesn’t effect the IX2.0 scroll interactions as much.
Appreciate your efforts!
Rob


#15

Alright I’ve cloned it. I’ll play around and see if I can find anything!


#16

@PHRyan @matthewpmunger

May I present this to you chaps:
https://www.twoupdigital.com/home-3

Using Scrollify. Boom :boom:


#17

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!


#18

Bam! :fist_right: :fist_left:


#19

Think you can edit the configuration easy enough. Obviosuly just used the default to get it going.

Scrollify must have cleaner code than fullPage.js using jQuery so less likely to cause conflicts.

Cheers mate and thanks for your help. Hope you can use it in one of your projects.

Fair few hours spent on this today but can now crack open a well-earned beer.


#20

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 :face_with_monocle: 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.

Still awesome though!