How to Recreate Apple TV’s Parallax Thumbnail Rollover Effect

In my previous tutorial I showed you how to use CSS 3D Transforms to create an isometric grid layout. It was quite challenging, since a few browsers such as Firefox have slightly different approaches in regard to how they render elements on a three-dimensional plane.

In this tutorial we’ll continue exploring 3D Transforms, by building a 3D parallax rollover effect, inspired by Apple TV’s interface. We’ll still be using Envato Elements as inspiration for our content; here’s what we’re working towards:

Hover over the thumbnail and move your cursor around; the thumbnail will lean according to the cursor position and the direction of movement.

Perspective: a Primer

As human beings our visibility is limited up to the vanishing horizon, and our binocular vision creates what we perceive as perspective. Perspective helps us interpret an object to be further away, rather than simply being smaller.

The isometric grid from the previous tutorial does not take “perspective” into account. The grid size–height and width–is actually retained. In reality we should be seeing the farthest side of the grid shrinking due to perspective.

In CSS, we can add perspective to 3D transformation through the perspective() function. It is worth noting that perspective() has to be added before other transform functions such as rotate() and translate() for it to take effect. It also requires a value defining the view distance relative to the element; whether the element should be viewed from afar or near.

That’s how we render a 3D plane with CSS. Now let’s see how we can apply this to create a parallax effect. We’ll start with the HTML:

The HTML Markup

If you followed our previous tutorial thoroughly, you will find the HTML markup to be quite similar. Here we have a div with a class of ItemCard wrapping the name, the image, and the link pointing to one of the items on Envato Elements.

With that done, we add some styles to the ItemCard. Beyond the aesthetic rules such as border-radius and box-shadow, we define the element transition and transformation including the perspective() function.

The parallax effect is applied through two jQuery Events mousemove and mouseout. The mousemove event fires up when the cursor is moving over the target element; in this case,.ItemCard. The mouseout fires when the mouse cursor is already outside the target element.

During the mousemove event, we retrieve the mouse cursor coordinates, determine the ItemCard rotation, and apply these numbers by adding inline styles. During the mouseout event, we strip out the inline style so that the ItemCard returns to its initial position.

Wrapping Up

In this tutorial we learned how to leverage 3D transformations to build a 3D parallax effect inspired by Apple TV.

Bear in mind, this effect will not work well on touch-enabled devices, so you’ll need to consider some kind of fallback, possibly with Touch Events to replicate the parallax effect–I will leave that on the table for you to tackle!