pennypacker.net: Fisheye javascript effects

Fisheye javascript effects

I was reading an article on weblog inc's CSS weblog and it showed some interesting "fish eye" effects that you can pull off with javascript and a little CSS. OK, so it's really not a CSS trick at all, it's 99% javascript, but I digress. The example shown was a neat little trick that zooms in on text that's moused over. Here's a direct link to the example on dannyayers.com.

I'm not sure that there's a lot of practical usage for this sort of thing, but it did pique my interest. So I made my own variant, but rather than working on a vertical list, it works horizontally in a paragraph. I'm fairly certain that it will not work properly with links and other nested mark-up at this current stage in its development, but that's not what it's about. Not yet anyway -- I plan to modify it so that it will work with nested markup. I've got a few other bigger ideas on where to take this script, but I'll keep them to myself at this stage of the game. And while those ideas are a great deal more grandiose, I think they're equally limited in their practical applications.

So without further ado, I bring you Fish Eye Text Fun. The script is inline, so check the source if you are interested in seeing how it works.

under:
Web Development
Posted on
2005-02-28

Comments:

Very nice.

Now to find an appropriate application of the technique.

Posted by:
shawn
on:
2005-03-01 15:54:14

Appropriate?

bah. Who needs appropriate!

OK, so one similar thing I was thinking that might be more practical would be a Mac OS X Dock style nav bar.

Posted by:
john
on:
2005-03-01 19:42:40

I am fascinated by this for no apparent reason. I just sit here and go back and forth.

Posted by:
elizabeth
on:
2005-03-07 11:01:50

This article is closed to further commentary. But you can always contact me directly.

Skip the sidebar

All things related to web design and development with a nice focus on using standards and accessibility

Recent Articles
Badges
  1. XHTML
  2. CSS
  3. 508
  4. RSS