SVG + CSS Animations = Fisheye Fun

By on March 28, 2008 12:32 am

Recently Apple delivered Safari 3.1 with some very exciting features. While we still can’t use things like multiple background images and drop shadows across all browsers, we are getting to play with the future and I, for one, am loving it. One of the most interesting things in Safari 3.1 is the (hopefully soon to be proposed and standardized as part of the CSS3 spec) CSS Animations. CSS animations allow you to animate just about any property on an element as well as do fun things like rotate and skew. As a demo of this I created a quick and dirty CSS3 fisheye/dock demo. As an added bonus, the demo uses SVG in the img tag.

So how does this work? Well here’s the CSS.

For each dock image:

.dock img {
   width:50px;
   padding:10px;
   float:left;
   position:relative;
   display:block;
   -webkit-transition:width 0.5s ease-out, top 0.2s ease-out;
}

With the last line of CSS we set width and top to be transition properties. Next we set the image to grow in width on hover and to bounce upwards when clicked.

.dock img:hover {
   width:100px;
}
		
.dock img:active {
   top:-40px;
}

With the transition set, Safari handles the rest. Now as a little added fun we set the image following the hovered over image to grow a little as well.

.dock img:hover + img {
   width:70px;
}

While this effect isn’t perfect and has little practical use, there is a lot of potential in Safari and CSS3 in general and I look forward to seeing what we as a community come up with.

Comments

  • Nice demo. Apple just turned on SMIL animation on the trunk (nightly builds). Care to rewrite your demo using SMIL so that it could work in both Opera and WebKit nightly?

  • Thats very cool. The animation is incredibly smooth.

  • Nice but shame it isn’t cross browser! Great work though!

  • George

    Hummm….

    Command: Safari
    Path: /Applications/Safari.app/Contents/MacOS/Safari
    Parent: WindowServer [77]

    Version: 3.1 (4525.13)
    Build Version: 1
    Project Name: WebBrowser
    Source Version: 45251300

    PID: 1599
    Thread: 0

    Exception: EXC_BAD_ACCESS (0x0001)
    Codes: KERN_PROTECTION_FAILURE (0x0002) at 0x00000008

  • the effect demo is very beautiful.

  • I just tried this demo under Safari 3.1.1 on a G4 Mac mini 1.25GHz 1GB RAM. I too got a fault:
    Date/Time: 2008-04-19 22:02:40.721 -0400
    OS Version: 10.4.11 (Build 8S165)
    Report Version: 4

    Command: Safari
    Path: /Applications/Safari.app/Contents/MacOS/Safari
    Parent: WindowServer [1556]

    Version: 3.1.1 (4525.18)
    Build Version: 1
    Project Name: WebBrowser
    Source Version: 45251800

    PID: 1594
    Thread: 0

    Exception: EXC_BAD_ACCESS (0x0001)
    Codes: KERN_PROTECTION_FAILURE (0x0002) at 0x00000008

  • Pingback: DojoCampus » Blog Archive » What is a _Widget()

  • Pingback: SitePen Blog » Taking a Look at CSS3()

  • rai

    i have made a modified version of marc grabanski’s fisheye menu… you may want to check it out…

    http://bostsip.blogspot.com/2009/10/mac-like-menu.html