FREEBIE: Background change on scroll

Been experimenting a lot with Webflow lately and i thought i’d share one of the experiments i’d done.
The site’s background changes as you scroll, allong with some cool quotes :smile:

Site: http://tone.webflow.io
Read only: https://preview.webflow.com/preview/tone?preview=265716bfbe1632689dbeabfc6ddefae4
Clone: https://webflow.com/website/tone-ikfpv2op

Michael

7 Likes

Really fun! Great use of interactions.

I like it. The read only link doesn’t work. Want to share how you did it?

Very Nice …! I love the zoom-in and out part.

Huh, weird the link that webflow gave me didn’t work at all.

Anyways, i generated another link & updated the thread:

https://preview.webflow.com/preview/tone?preview=265716bfbe1632689dbeabfc6ddefae4

Nice one, love the Color part especially!

Thanks for the share - just a small correction - think you misspelled Gandhi

Oh wow i did, thanks for telling me!

This is super cool Michael @DharmaNode.

One thing to note, the 50% offsets on iOS tablet display a blank white screen for the duration of the scroll for most sections. It occurs when viewing in desktop (horizontal) or tablet view (vertical). I think that is maybe due to the VH iOS bug? Not sure, and not even sure it is due to the offsets?? Just a faint memory of an issue I have encountered before and I think that was it. If I scroll very slowly on tablet, sometimes the images will display.

I will be able to play with the offsets and test later in the week. Wish I had more time now.

@DharmaNode, Hi Michael. The site is working perfectly on iOS now. Awesome - thank you. Very curious what you did to resolve it?

Hi @vlogic!

I actually changed a few minor things such as setting the overlapling div (with the colors and images buttons) on display none.

Glad it fixed it! :slight_smile: