This bit of CSS demonstrates how two fixed backgrounds (in this case, one black and white, the other color) can be layered so that the view port div of the top layer, appears to change the state of the bottom layer. This effect works well with a blurred/clear image as well. Your imagination is the limit! Enjoy!
A Pen by Steve Reich on CodePen.
| (function (global) { | |
| if ( !global.Event && !('keys' in Object) && !('bind' in Function) ) { return } | |
| var eventProto = Event.prototype, | |
| EVENTS = { | |
| 'mouse': [ 'click', 'dblclick', 'contextmenu', 'mousedown', 'mouseup', 'mouseover', 'mousemove', 'mouseout', 'drag', 'dragend', 'dragenter', 'dragleave', 'dragover', 'drop'], | |
| 'key': [ 'keydown', 'keypress', 'keyup', 'input'], | |
| 'res': [ 'load', 'unload', 'beforeunload', 'abort', 'error', 'resize', 'scroll', 'readystatechange' ], | |
| 'form': [ 'select', 'change', 'submit', 'reset', 'focus', 'blur' ], | |
| 'ui': [ 'DOMFocusIn', 'DOMFocusOut', 'DOMActivate', 'DOMCharacterDataModified', 'DOMNodeInserted', 'DOMNodeRemoved', 'DOMSubtreeModified' ], |
| // Use Gists to store code you would like to remember later on | |
| console.log(window); // log the "window" object to the console |