Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Mar 2009
    Posts
    65
    Thanks
    4
    Thanked 4 Times in 4 Posts

    Question Add in some animation?

    With the spry menu that I have set up on my website:
    http://www.mwgriffin.com/

    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
    http://www.hesido.com/web.php?page=javascriptanimation
    into it. Or maybe I should just adopt something like this instead:
    http://woork.blogspot.com/2008/01/mo...ebar-menu.html
    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!


    Update:
    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.
    Last edited by mwgriffin; 03-19-2009 at 04:46 PM.
    MICHAEL GRIFFIN
    MWGRIFFIN.COM

  • #2
    New Coder
    Join Date
    Mar 2009
    Posts
    65
    Thanks
    4
    Thanked 4 Times in 4 Posts
    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:
    Code:
    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)
    		return;
    	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;
    	}
    
    	Spry.Effect.makePositioned(element);
    	
    	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);
    	this.addNextEffect(effect);
    
    	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)
    			this.addNextEffect(effectToRight);
    		else
    			this.addNextEffect(effectToLeft);
    	}
    	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);
    	this.addNextEffect(effect);
    };

    and here's my html:

    Code:
    <!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">
    <head>
    
    <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" />
    
    
    
    <title>MWGriffin</title>
    
    <link href="MWGriffinStyle.css" rel="stylesheet" type="text/css" />
    
    <!--[if IE]>
    <link href="IE.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    
    <!-- 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/1.6.0.3/prototype.js'></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"/>
    
    </head>
    
    <body class="twoColElsLtHdr" onload="mine.loadContent('Home.html')">
    
    <!--[if lte IE6]>
    PLEASE UPGRADE YOUR BROWSER TO EITHER SAFARI, INTERNET EXPLORER 7, OR MOZILLA FIREFOX
    <![endif]-->
    
    <div id="shadowbox_top"></div>
    <div id="shadowbox_leftSide"></div>
      <div id="header">
        <h1>MWGriffin</h1>
      <!-- end #header --></div>
      <div class="sidebar1">
      <div class="paddingsidebar">
        <h3>Menu</h3>
        
    <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>
    </ul>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    <script type="text/javascript">
       var sldh1_sl = new Spry.Effect.Shake('sldh1', {duration: 10});
    </script> 
    <script type="text/javascript">
       var sldh2_sl = new Spry.Effect.Shake('sldh2', {duration: 10});
    </script> 
    <script type="text/javascript">
       var sldh3_sl = new Spry.Effect.Shake('sldh3', {duration: 10});
    </script> 
    <script type="text/javascript">
       var sldh4_sl = new Spry.Effect.Shake('sldh4', {duration: 10});
    </script> 
    <script type="text/javascript">
       var sldh5_sl = new Spry.Effect.Shake('sldh5', {duration: 10});
    </script> 
    <script type="text/javascript">
       var sldh6_sl = new Spry.Effect.Shake('sldh6', {duration: 10});
    </script> 
    <script type="text/javascript">
       var sldh7_sl = new Spry.Effect.Shake('sldh7', {duration: 10});
    </script> 
    <script type="text/javascript">
       var sldh8_sl = new Spry.Effect.Shake('sldh8', {duration: 10});
    </script> 
    <script type="text/javascript">
       var sldh9_sl = new Spry.Effect.Shake('sldh9', {duration: 10});
    </script> 
    <script type="text/javascript">
       var sldh10_sl = new Spry.Effect.Shake('sldh10', {duration: 10});
    </script> 
    
      </div>
      <!-- end #sidebar1 --></div>
      
      <div id="mainContent">
        <div class="paddingmain">
          <div id="pageChange">
          </div>
            <script type="text/javascript">
              var mine = new Spry.Widget.HTMLPanel("pageChange");
            </script>
        </div>
      <!-- end #mainContent --></div>
      <div id="shadowbox_bottom"></div>
      <div id="footer">
        <p>Copyright © 2008 Michael Griffin. All Rights Reserved.</p>
      <!-- end #footer --></div>
    </body>
    </html>
    Last edited by mwgriffin; 03-19-2009 at 10:58 PM.
    MICHAEL GRIFFIN
    MWGRIFFIN.COM

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,525
    Thanks
    80
    Thanked 4,490 Times in 4,454 Posts
    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.

  • #4
    New Coder
    Join Date
    Mar 2009
    Posts
    65
    Thanks
    4
    Thanked 4 Times in 4 Posts
    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.
    MICHAEL GRIFFIN
    MWGRIFFIN.COM

  • #5
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    here's a great fader script I found a while back.
    http://clagnut.com/sandbox/imagefades/

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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •