search

nerdwise / nerdwise-website

Promotional website for Nerdwise
0 stars 0 forks source link

Cross fade scroll tween between block transitions #115

Closed kadenzipfel closed 5 years ago

kadenzipfel commented 5 years ago

The idea is to make the current header change to the color of the next one as the next one is getting closer

kadenzipfel commented 5 years ago

This issue also can't be resolved until https://github.com/nerdwise/nerdwise-website/issues/124 is.

angusm commented 5 years ago

To do this, we want to have two background divs with the block. One for the current color. One for the next color. The second one should be z-indexed above the first. The second one should tween between 0 opacity and 1 opacity The tween should run from when they are about to touch and end when they are touching, so that there is no moment when two different colors touch.

To do this you'll need to use tan() and the TOA formula to get how far along the Y axis the two corners have traveled as a result of the Skew. You'll need to set the start/end distance as a formula that returns that amount plus a portion of the screen height plus a portion of the block height.

kadenzipfel commented 5 years ago

https://github.com/nerdwise/nerdwise-website/pull/148