A Material Design inspired slider with effective communicating animations.
What is Communication Design?
A recent example of communication design would be Google’s Material Design language which has transformed our view on how it’s possible to communicate with the end user.
“Communication design is a mixed discipline between design and information-development which is concerned with how media intermission such as printed, crafted, electronic media or presentations communicate with people.” -Wikipedia
How it works
When we hover over a square, a.k.a a menu item, we get a preview of what that slide looks like. This communicates to the user whether they can expect text, or an image, or both. The animations are simple CSS transforms triggered on
:hover and the slide animations use the same CSS classes but are triggered with jQuery.