check out More Example
1) Clip-path for image masking rectangle border (webkit only).
2) Blend-mode for this mask.
3) Smart color system, just put your color name and value into sass map and then add proper class with this color name to elements and everything will work!
4) Cool credits side-menu (click small button in the center of demo).
5) Vanilla js with just < 200 lines of code (basically it's just adds/removes classes).
6) Reusable/configurable. I will add some comments to css/js code if I don't forget about it :D
P.S. - background-attachment: fixed does not working with transforms, so I tried to achieve completly static bg-image during mask movement with translateY, but bg-image was "jumpy", so right now bg-image simply goes up when mask rotates, which is ok for me.
3. Sass button border hover effect mixin
4. single element animation icon~
4. Animating border-radius
5. CSS-only border animation on hover. It needs a solid background in order to work.