Recreating the Apple TV icons in JavaScript and CSS

Caution! (A little math ahead)

The effect as I understood is simple, the closer you move the cursor to an edge of an icon, the more it rotates along the perpendicular axis and translates away from the cursor appearing as if it is following the cursor in a 3 dimensional space.

Fig. 1
Fig. 2
Fig. 3
Fig. 4
Fig. 5
Fig. 6

Thinking 3 dimensionally

I created the feel of depth by manipulating the maxTranslation values. Every icon has a base, that is the colored or gradient colored rectangle over or below which other components are placed on or under respectively.

Usage

In your html file create a simple div with a class name of your choice, let’s call it icon. Inside this div include all the different components of the icon each with an attribute of “data-stacking-factor”. The icon is initialized in js by calling ATicon.getInstance() and passing in it a jQuery wrapped DOM element, div.icon in this case.

Stacking Factors : yellow = 1.4, black = 0.4, red =1
Stacking Factors : yellow = 0.4, black = 1.4, red = 1
Stacking Factors : yellow =1, black = 1, red = 1

--

--

Illustrator/Designer/Educator. Read more @ nashvail.me

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nash Vail

Nash Vail

Illustrator/Designer/Educator. Read more @ nashvail.me