Streaming live at 10am (PST)

FREEBIE: Background change on scroll


#1

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


Confused about about background colors and the cloned site
This feature with interactions?
Can I scroll like this with interaction 1.0?
Is this scroll effect with webflow possible
#2

Really fun! Great use of interactions.


#3

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


#4

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


#5

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


#6

Nice one, love the Color part especially!


#7

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


#8

Oh wow i did, thanks for telling me!


#9

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.


#10

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


#11

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! :smile:


#12