A tribute to one of the best Sci-Fi movies of all times: "THE DAY THE EARTH STOOD STILL".
A test of converting a timeline based animation sequence spanning several elements, into something more manageble than percentage values using SASS.
Benefits of this:
- Easier to maintain.
- Easy to change timing of existing timeline sequences.
- Easy to add new timeline sequences between existing sequences.
- Better overview in the @keyframes animations.
One JS demo per day - this is April 9th, 2015.
Using [canvas filters](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled) - only working in Firefox at the moment [with flag enabled](https://twitter.com/anatudor/status/586102852642279424).
Goal: create a nicely styled cross-browser 1 element slider. Tested & works in Firefox 36, 39 (nightly), Chrome 41, 43 (canary)/ Opera 28, 29 beta, IE 11 on Windows 8. CSS-only in Firefox & IE/ not much JS needed for Chrome/ Opera. Lines don't look too good in Chrome 41/ Opera.
Has a couple of nice extras in Chrome/ Opera - the shape of he thumb and the current value displayed on it. This is achieved by using pseudo elements on the thumb. This is something that didn't work until recen
双面胶