Have you seen the latest Apple iMac with Retina product page? If not, go and check it out (in Chrome or Safari).
How was the fancy zoom out effect created? Scaling down a single huge image? Or was there some other trick?
The powerful zoom out effect which reveals the amount of details of these all in one computers was created by using multiple canvas elements and
Keep reading for a more detailed explanation.
Can’t See The Effect In Your Browser?
Here is a video showing the zoom out effect in Chrome. For some reason it’s disabled in Firefox.
Zoom Out Effect
Apple is famous for their products and beautifully designed product pages. Remember Apple Mac Pro page?
The new iMac with Retina page takes the advantage of the very popular scrolling animations and zooms out from a large image to a small iMac view.
How was it done? Here is the simplified HTML markup.
<div class="intro-product section-content">
<div class="intro-image" style="width: 6500px; height: 4611px; -webkit-transform-origin: 50% 0px; -webkit-transform: translate3d(-50%, 324px, 0px) scale(0.15460443522499);">
<canvas width="1310" height="1547" style="position: absolute; left: 0px; top: 0px;"></canvas>
<canvas width="1310" height="1547" style="position: absolute; left: 5200px; top: 3074px;"></canvas>
<section class="section-intro-lockup" style="padding-top: 1572px;">
There is a large container
.section-intro which contains the zoomed in elements.
.intro-image div containing 15x
canvas elements positioned absolute in a grid with 3 rows and 5 columns.
.section-intro-lockup contains the zoomed out view of the iMac screen and has a huge
Have a look at a more visual demonstration.
Intro Image Deconstruction
Let’s start by deconstructing the
.intro-image and its position when you completely zoom out.
It will make it easier to understand what’s happening on page load.
.section-intro-lockup is a div containing the main content of the page and has a huge padding top.
This essentially creates a space at the top of the page for the zoom-out effect.
The position of the
.intro-image is set to
position: absolute; left: 50%.
The rest of the css properties of the
It is scaled down and pulled left, to make this element sit exactly on top of the
More on this in the next section.
The Magic Of CSS Transforms
On the image below you’ll see both sections precisely positioned on top of each other.
transform-origin: 50% 0 defines a point which controls the direction of scaling.
In other words this is a point from which the image is scaled up.
332px is the top offset when both elements are overlapping.
So what’s actually happening on page load?
The Position On Page Load
It took us some time to break things down and the following image shows the position of
.intro-image on page load.
Two CSS properties are animated. Scale and Y offset.
Given the large width and height, scale(1) makes it almost 6 times bigger then the browser viewport.
-1277px pulls the
.intro-image above the top of the viewport.
transform-origin: 50% 0 that’s what made the top centre of the image the anchor point for the animation.
Does it make more sense now?
You can visit a Codepen demo from Marius Balaj, trying to recreate a similar effect using a single background image.
To recap this effect, a large container is scaled down from the original
scale(1) with the top offset.
The zoomed out css properties make this image align perfectly with the image below it.
I hope it answered a lot of your questions and let me know in the comments below what you think about this creative effect.
Until next time, happy coding.