Mouse Over animation

[Swade]

Hello Scripty group,

I came across scripty while looking for an alternative to animating
with Flash. I am experienced with basic and some advanced flash
animation, but want to try and not use it for the current website I'm
designing. My knowledge of javascript is not as extensive however.

I wanted to create a simple mouse over animation. Basically for the
main navigation links of the page I want there to be a line png under
the currently selected link. The line will sit under the currently
selected navigation link and when the user scrolls over to one of the
other lines I'd want to see the line animate moving right or left
horizontally to be under the mouse over link.

I wanted to ask here first for any help or general direction I could
be pointed in to execute such an animation. If anyone knows of a
tutorial already demonstrating such an animated effect that doesn't
use flash then that would also be greatly appreciated.

Thanks.

[Rod]

Hi Swade, welcome to the world of JavaScript ad Scripty2 in
particular.

A tempting challenge to fill my evening! I've put together a Scripty2
example of what I think you're talking about and you can find it here:
http://js.vagg.org/s2/menu.html

View the source of the page, the code is in there. Note that the
important action for this kind of thing in Scripty2 is in the
element.morph() function. For the first argument you can pass the
style that you want the element to end up with (this argument is
beautifully flexible) and the second is your (optional) options.

As an aside, while tackling this one I found that cancelling an effect
in progress was very tricky, possibly some bugs in beta1 or perhaps I
haven't stumbled upon a more appropriate way to do it. I would have
thought a simple cancel() would do everything needed but that's
apparently not the case. Do any of the core developers have comments
on this?

-- Rod

[Swade]

Rod, you really went above and beyond what I was expecting!

This is essentially exactly what I was looking for. I've been
studying your source code and duplicated the page in my editor and
created links to other pages using the "active" class to change the
link the line stays under.

I was wondering if there was a way to use a pre-created image instead
of the dynamic line you created? I actually didn't have it in mind
for the line to adjust to the widths of the different links (but that
is really cool) I was hoping to create a shape in photoshop and
animate it just like the line you created.

I apologize for my relatively newbie questions, as I mentioned before
my proficiency with js and even css is somewhat limited to basic use.
I am trying to broaden my knowledge in these respective areas.

I truly appreciate you taking the time to put together a working
example so quickly! I'm sure that this will also be a big help to
others in the scripty community as well.

[Rod]

On Feb 13, 4:22 am, Swade <wfull...@gmail.com> wrote:
> Rod, you really went above and beyond what I was expecting!

No problems, Scripty and Prototype don't get much love these days
compared to the alternatives so it's good to have content and examples
available. I'd like to write this one up in a blog post when I have
time.

> I was wondering if there was a way to use a pre-created image instead
> of the dynamic line you created?  I actually didn't have it in mind
> for the line to adjust to the widths of the different links (but that
> is really cool)  I was hoping to create a shape in photoshop and
> animate it just like the line you created.

Pretty simple, but you'll need to fiddle with the styles, if you look
at the menu.css file at the same location (linked in the HTML) you'll
fid the 4 rules at the bottom that made the menu. s2-menu-active is
the class of the line block, you'll need to change that to suit an
image, at least remove the border definition which creates the line.
Then, you'll want to put the image in and you have a few alternatives.
You could put a <img> inside the <div> block and just let it hold the
image. You could replace the whole <div> with an image and Scripty2
will just be moving the image, but for this you'll need to change the
selector in the JavaScript from 'div.s2-menu-active' to something
that'll select your image, getting rid of the 'div' at the front would
work if you give your image the appropriate class. Or, you could put
your image as a background to the div using CSS (this is probably the
option I'd use because it'll let you build sprites, but it can get
quite complex so perhaps start simple). This'll mostly be about
building your CSS skills.

Also, the width bit is easy to remove, you'll see where I build the
style for the morph() operation where it has "var style =
{ left: ...., width: .... };", just get rid of the width component to
end up with "var style = { left: .... }". Of course you could even
build a vertical menu system using the same logic and just morph the
'top' property to make it go up and down. You may also want to have a
play with the different transitions available in Scripty2, have a
browse through them here: http://scripty2.com/doc/scripty2 fx/s2/fx/
transitions.html and try sticking them in to your code where you see
I've specified 'easeOutBack'. There's also a couple of different
timings in that code that you could play with to get just the effect
you want.

> I apologize for my relatively newbie questions, as I mentioned before
> my proficiency with js and even css is somewhat limited to basic use.
> I am trying to broaden my knowledge in these respective areas.

Be aware that a lot of the JavaScript I've used is Prototype flavour
(the library that Scripty2 builds on) so you'll want to have access to
the API docs at http://prototypejs.org where you'll find information
on methods that you won't see in standard JavaScript or on the MDC
(https://developer.mozilla.org/en/JavaScript). Plus, don't be afraid
to dig into the source of both Prototype and Scripty2, there's plenty
to learn from the gurus who put them together.

> I truly appreciate you taking the time to put together a working
> example so quickly!  I'm sure that this will also be a big help to
> others in the scripty community as well.

Cheers!
-- Rod