So I've saw this website: http://unfold.no/ And I want to learn how to build navigation bar that is both transparent and can change color as function of background (if you scroll up or down you'll see it) . I have limited experience with navigation bars that dates to old Dreamweaver versions, so forgive me for the generality of the question... Any advise of where to start will be appreciated.
Asked
Active
Viewed 63 times
0
-
Maybe something similar like [this](http://stackoverflow.com/questions/16981763/invert-css-font-color-depending-on-background-color) would help. – Alex VII Jun 19 '14 at 00:08
1 Answers
0
I guess your issue can be solved by reading the answer on this question:
Changing classes with animation depending on scroll position
Basically, in the example you are showing, the menu has a position: absolute on the page, which positions it on the top right corner of the page. Then, an easy way of changing the color of the menu is by swapping classes on the menu itself through Javascript. You can use the code shown on the link above to see how this is done.
By swapping classes regarding the element colors with animation, you then give each element a CSS transition just like this:
.object{
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
This CSS will make your elements change color by fading with an animation duration of 0.5 seconds.
It is pretty simple if you know have a basic understanding of CSS and Javascript
