View Full Version : Add in some animation?

03-19-2009, 02:16 PM
With the spry menu that I have set up on my website:

Is it even possible to add some animation to it? for instance when you roll over it, the highlighted element pops out to the right, and the color change from not selected to selected is gradual... Should I just abandon this menu and make another one using another framework? It seems like it would be fairly easy for an experienced programmer to integrate something like this
into it. Or maybe I should just adopt something like this instead:
What do you think? Would it be easy to achieve a similar look with another framework? Will it perform as well in another frame work? I really don't know. Any information would be really helpful. Thank you!

Ok so I looked around at what spry had to offer, and I saw that it had these things called effects. Well, need less to say, I was able to integrate the "shake" effect with the menu bar, such that now each tab shakes as the mouse passes over it. There would be three things that I would like to change though... number 1: To be able to have the tab stay in the out position while the mouse is over it. number 2: to be able to have it extend slower and get larger, instead of just moving. number 3: change the code so that I don't need to have a script for each tab on the menu (one script to animate them all individually).

Here's another update, I was able to edit the spryeffects.js so that the effect is now slower, and it now only extends to the right instead of shaking.

03-19-2009, 11:54 PM
thanks to whoever moved the thread. I realized that it might not have been in the right place after I submitted it.
hope this helps!
here's the section of the spry script that creates the "shake" effect:

Spry.Effect.Shake = function (element, options)
if (!this.notStaticAnimator)
return Spry.Effect.Utils.showInitError('Shake');

Spry.Effect.Cluster.call(this, options);

// toggle is not supported
this.options.direction = false;
if (this.options.toggle)
this.options.toggle = false;

this.name = 'Shake';

var element = Spry.Effect.getElement(element);
this.element = element;
if (!this.element)
var durationInMilliseconds = 500;
var kindOfTransition = Spry.linearTransition;
var fps = 60;
var steps = 4;

if (options)
if (options.duration != null) steps = Math.ceil(this.options.duration / durationInMilliseconds) - 1;
if (options.fps != null) fps = options.fps;
if (options.transition != null) kindOfTransition = options.transition;


var startOffsetPosition = new Spry.Effect.Utils.Position();
startOffsetPosition.x = parseInt(Spry.Effect.getStyleProp(element, "left"), 10);
startOffsetPosition.y = parseInt(Spry.Effect.getStyleProp(element, "top"), 10);
if (!startOffsetPosition.x) startOffsetPosition.x = 0;
if (!startOffsetPosition.y) startOffsetPosition.y = 0;

var centerPos = new Spry.Effect.Utils.Position;
centerPos.x = startOffsetPosition.x;
centerPos.y = startOffsetPosition.y;

var rightPos = new Spry.Effect.Utils.Position;
rightPos.x = startOffsetPosition.x + 20;
rightPos.y = startOffsetPosition.y + 0;

var leftPos = new Spry.Effect.Utils.Position;
leftPos.x = startOffsetPosition.x + 0;
leftPos.y = startOffsetPosition.y + 0;

options = {duration:Math.ceil(durationInMilliseconds / 2), toggle:false, fps: fps, transition: kindOfTransition};
var effect = new Spry.Effect.Move(element, centerPos, rightPos, options);

options = {duration:durationInMilliseconds, toggle:false, fps:fps, transition: kindOfTransition};
var effectToRight = new Spry.Effect.Move(element, rightPos, leftPos, options);
var effectToLeft = new Spry.Effect.Move(element, leftPos, rightPos, options);

for (var i=0; i < steps; i++)
if (i % 2 == 0)
var pos = (steps % 2 == 0) ? rightPos: leftPos;

options = {duration:Math.ceil(durationInMilliseconds / 2), toggle:false, fps: fps, transition: kindOfTransition};
var effect = new Spry.Effect.Move(element, pos, centerPos, options);

and here's my html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<meta name="description" content="MWGriffin is a site dedicated to my personal works of CG and VFX."/>
<meta name="keywords" content="regnant studios,regnantstudios.com,regnant,michael griffin,mwgriffin.com,mwgriffin,michael w griffin,michael william griffin"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" />


<link href="MWGriffinStyle.css" rel="stylesheet" type="text/css" />

<!--[if IE]>
<link href="IE.css" rel="stylesheet" type="text/css" />

<!-- Spry references-->
<script src="SpryAssets/SpryHTMLPanel.js" type="text/javascript"></script>
<link href="SpryAssets/SpryHTMLPanel.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>

<!-- Lightview references -->
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/prototype/'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js'></script>
<script type='text/javascript' src='js/lightview.js'></script>
<link rel="stylesheet" type="text/css" href="css/lightview.css" />

<!-- Prototip references -->
<script type='text/javascript' src='js/prototip.js'></script>
<link rel="stylesheet" type="text/css" href="css/prototip.css"/>


<body class="twoColElsLtHdr" onload="mine.loadContent('Home.html')">

<!--[if lte IE6]>

<div id="shadowbox_top"></div>
<div id="shadowbox_leftSide"></div>
<div id="header">
<!-- end #header --></div>
<div class="sidebar1">
<div class="paddingsidebar">

<ul id="MenuBar1" class="MenuBarVertical">
<li><a id="sldh1" onmouseover="sldh1_sl.start()" onclick="mine.loadContent('Home.html'); return false;">Home</a></li>
<li><a id="sldh2" onmouseover="sldh2_sl.start()" onclick="mine.loadContent('AboutMe.html'); return false;">About Me</a></li>
<li><a id="sldh3" onmouseover="sldh3_sl.start()" onclick="mine.loadContent('Images.html'); return false;">Images</a></li>
<li><a id="sldh4" onmouseover="sldh4_sl.start()" onclick="mine.loadContent('Videos.html'); return false;">Videos</a></li>
<li><a id="sldh5" onmouseover="sldh5_sl.start()" onclick="mine.loadContent('Audio.html'); return false;">Audio</a></li>
<li><a id="sldh6" onmouseover="sldh6_sl.start()" onclick="mine.loadContent('Files.html'); return false;">Files</a></li>
<li><a id="sldh7" onmouseover="sldh7_sl.start()" onclick="mine.loadContent('Scripts.html'); return false;">Scripts</a></li>
<li><a id="sldh8" onmouseover="sldh8_sl.start()" onclick="mine.loadContent('Contact.html'); return false;">Contact</a></li>
<li><a id="sldh9" onmouseover="sldh9_sl.start()" onclick="window.location='protected/'; return false;">Restricted Access</a></li>
<li><a id="sldh10" onmouseover="sldh10_sl.start()" onclick="window.open('http://www.regnantstudios.com/'); return false;">Regnant Studios</a></li>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
<script type="text/javascript">
var sldh1_sl = new Spry.Effect.Shake('sldh1', {duration: 10});
<script type="text/javascript">
var sldh2_sl = new Spry.Effect.Shake('sldh2', {duration: 10});
<script type="text/javascript">
var sldh3_sl = new Spry.Effect.Shake('sldh3', {duration: 10});
<script type="text/javascript">
var sldh4_sl = new Spry.Effect.Shake('sldh4', {duration: 10});
<script type="text/javascript">
var sldh5_sl = new Spry.Effect.Shake('sldh5', {duration: 10});
<script type="text/javascript">
var sldh6_sl = new Spry.Effect.Shake('sldh6', {duration: 10});
<script type="text/javascript">
var sldh7_sl = new Spry.Effect.Shake('sldh7', {duration: 10});
<script type="text/javascript">
var sldh8_sl = new Spry.Effect.Shake('sldh8', {duration: 10});
<script type="text/javascript">
var sldh9_sl = new Spry.Effect.Shake('sldh9', {duration: 10});
<script type="text/javascript">
var sldh10_sl = new Spry.Effect.Shake('sldh10', {duration: 10});

<!-- end #sidebar1 --></div>

<div id="mainContent">
<div class="paddingmain">
<div id="pageChange">
<script type="text/javascript">
var mine = new Spry.Widget.HTMLPanel("pageChange");
<!-- end #mainContent --></div>
<div id="shadowbox_bottom"></div>
<div id="footer">
<p>Copyright 2008 Michael Griffin. All Rights Reserved.</p>
<!-- end #footer --></div>

Old Pedant
03-20-2009, 08:01 AM
Why not simply coordinate the color change with the shake???

The further the element moves to the right, the more the color changes.

You could either have it change back as it moves left or not.

When another item is moused over, you could either set off a fade to original in the previously colored one or just change it abruptly.

It's truly amazing top me that it takes that much code just to set up Spry to *do* the shake. Surely you could code the shake by hand in about a third or a quarter that much code. Amazing.

03-21-2009, 06:03 PM
Yeah that was what was puzzling me. I'm not by any stretch an expert programer but looking over the code for just that effect, not to mention all of the other effects, it seemed like a lot of code for what it was doing. I'm going to learn how to code java script because of this. I'll come up with something. :D

03-21-2009, 06:22 PM
here's a great fader script I found a while back.

You could easily handle the fade with this and I doubt it would interfere with the other scripts.