-1

UPDATE: I just wanted to say thank you to Ricky for finding the term "Clipping" for me, as well as this obscurely titled post "CSS change color on scroll / cut text - overflow z-index" which might explain why I couldn't find it with my search terms.

This is an advanced technique that modifies a basic color change on scroll position.

I can't find the sample website where I first saw this effect and it is killing me. I've gone through my history for hours!

So the trick is this: I have a website with several block sections, and one of the sections has a background that is primarily white, so the white sticky nav bar logo and text don't show properly. What I want to happen is that when this white section passes through the nav bar it slowly fills the white text with black, from the bottom up.

I don't need you to code this for me, just can somebody tell me if they have seen a website that does this so I can reference it?

DesignGuy702
  • 27
  • 1
  • 7
  • 1
    Research a bit about animations, try coding it and come back if you get stuck. This isn't a "code this for me" service, you post some code and we help. – yuriy636 Aug 16 '16 at 17:30
  • I just need an example of a site that does this and I can figure it out... but I am not good with words and I can't seem to find anything like this. – DesignGuy702 Aug 16 '16 at 17:32
  • http://www.tryitfirst.com/ – Brant Aug 16 '16 at 17:39
  • try this out @ChrisHiggins http://stackoverflow.com/questions/29738787/filling-water-animation – Smit Aug 16 '16 at 17:42
  • Well that is a good start, thank you Smit. I don't need it to look like actual water, that was just me being bad with words. None of those examples seem to match scroll position though. So basically if I scroll up, the text fills up, but if I decide to scroll down, then it would unfill. But I need the fill to match the top of the white block which is making things very difficult. – DesignGuy702 Aug 16 '16 at 17:45
  • tryitfirst.com seems to give a 403 error :) – DesignGuy702 Aug 16 '16 at 17:46
  • I'm looking up CSS animations at http://www.w3schools.com/css/css3_animations.asp and it isn't really what I'm looking for. I think its more of a mask that reveals a menu below possibly. – DesignGuy702 Aug 16 '16 at 17:54
  • Does this Help? http://stackoverflow.com/questions/27484858/css-change-color-on-scroll-cut-text-overflow-z-index – Ricky Aug 16 '16 at 18:36
  • @Ricky thank you, you are amazing. Great find! Can you post that as an answer so I can mark it? – DesignGuy702 Aug 16 '16 at 22:39

1 Answers1

0

Okay dude, so that terminology is called clipping, what it does is changes the font color as your scrolling, this is particularly useful if you have a scrollable page with full width divs of various colors, using the "clipping" technique you are able to change the color of the font against the background color so it is easier then for the end user to read. I have placed a link in the comments above that will go further into this for you, BTW it was a quick Google search that found it :)

Ricky
  • 763
  • 3
  • 7
  • 29
  • For you. I searched for hours because I didn't know what to call it. :) Like I said, I am a numbers geek and pretty bad with words. – DesignGuy702 Aug 18 '16 at 17:45
  • It's okay, This is after all a site for help that is what we are all here for – Ricky Aug 18 '16 at 17:49