on mouseover - vertical transition (Image clipped at 50%)
Hello, guys
This is my first post in the forum.
I've been exploring this site
http://coptix.com/
and I've found there, once more, a smooth menu which rotates vertically on mouse over (and which I'd like to reproduce somewhere else).
As far as I've seen, they are using images to replace the words they want to display in that navigation bar.
So the images have two parts: the grey one, the colored one. Each of them is built as two-lines-of-text image.
I've been checking their .js, but it seems to be pretty complicated.
First, there's a 'transition' effect, combinated with a clip CSS property (I think) to hide the top of the image, which will be showed when it slides on mouseover.
Second, there's a fade in effect : on mouseout, the image fades to its original position.
I was wondering if it is an easier way to get a similar
transition effect, which is the one I'm more interested : I know isn't a slide effect, because slide effect just works with the height of the matched element.
I wouldn't know where to start, which kind of script could move an element from a position to another, allowing to a clip CSS property show only one specific zone of the image at a time.
I have seen the JQuery documentation but I'm kind of lost right now.
I listened Dreamweaver was able to produce a little script and get something similar, but since I read some critics about the DW scripts I prefer to ask if someone knows some plugin to reproduce such a menu.
Many thanks for any tip and sorry for my english,
Creedence