Animated Apple Logo With Steve Jobs Demo

29th October 2011 · Last updated: 5th October 2016
 

Comments


I was recently impressed by the wonderful version of the Apple logo Jonathan Mak created as a tribute to the late Steve Jobs. I wondered if I could animate it, so the logo would fade in over the original Apple logo, purely using CSS. The way I found to do this was to have the original logo shown as an image first. Then, on hovering over the image, fade the opacity out to zero. This reveals the logo featuring Steve Jobs instead, which is simply a background image. I really like the result. It's almost peaceful to watch the logo fade in and out. (The original logo fades back in when you move the mouse away.) See what you think:

RUN THE DEMO

Here's the code that governs the image. CSS transitions are used to fade the opacity out in one and a half seconds, which seemed just right to me after much experimenting. Multiple lines of code are used to cover the main browsers, as this is still experimental code:

img {
-webkit-transition: all 1.5s ease-in-out;
   -moz-transition: all 1.5s ease-in-out;
    -ms-transition: all 1.5s ease-in-out;
     -o-transition: all 1.5s ease-in-out;
        transition: all 1.5s ease-in-out;
}
img:hover {opacity:0;}

I went further and decided to add an information bar at the top. This would only appear when you hovered over a question mark icon. I used rounded corners at the bottom of a span to achieve this look relatively easily. (In fact I was opting for a circle, but this shape appealed to me more, as it fits flush with the top edge of the screen.)

width:20px;
height:20px;
background-color:#77a;
border-radius:0 0 50px 50px;
padding:20px;

I wanted the question mark icon to fade out when the text in the information bar was revealed. To do this I used two layers, with the icon on both. The bottom layer is revealed when the top one fades out. That way I could also change the icon's background colour to a darker shade on hover.

The text is initially set to opacity zero so you can't see it. (I didn't want to ruin the minimal effect of just the Apple logo on the screen.) To reveal it, the opacity is faded up to 100% on hover. I used a faster transition speed - 0.3 seconds - rather than the 1.5 seconds used for the logo. Here's the gist of the code, with the top layer using an ID of "topline2":

#topline2 {
-webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
}
#topline2 {opacity:0;}
#topline2:hover {opacity:100;}

Simple eh? The only problem with the demo is that it doesn't work in Internet Explorer 8 (or below I assume). It should work in all versions that support the relevant CSS though.

Comments (1)

  1. nitro2k01:

    If you really, really want to support IE8 and below, you might have some luck with IE's proprietary old-style filter: progid: ... transition effects.

    Posted on 7th January 2012 at 5:41 pm