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 2 of 2
  1. #1
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts

    Scriptaculous Effects Queue

    I have an image which I want to move around slightly, like a boat on water, when the cursor is over. I have used Effect.Move to create this with an effect queue. Here is the code.

    Javascript
    Code:
    function FloatIt(element){
    	new Effect.Move(element, { x: 10, y: -10, mode: 'relative', duration: 2.2, queue: { position: 'end', scope: 'fscope' } });
    	new Effect.Move(element, { x: -20, y: 5, mode: 'relative', duration: 2.2, queue: { position: 'end', scope: 'fscope' } });
    	new Effect.Move(element, { x: 5, y: -15, mode: 'relative', duration: 2.2, queue: { position: 'end', scope: 'fscope' } });
    	new Effect.Move(element, { x: -5, y: 20, mode: 'relative', duration: 2.2, queue: { position: 'end', scope: 'fscope' } });
    }
    
    function StopFloatIt(element){
    	var queue = Effect.Queues.get('fscope');
    	queue.each(function(effect) { effect.cancel(); });
    }
    HTML

    Code:
    <span id="floater"><a href="#" onmouseover="FloatIt('floater');" onmouseout="StopFloatIt('portfolio');">Float me!</a></span>
    My questions are these:

    1) I have only been able to Stop the floating where it is, so when I mouseout, it does not return to its original location. Can I somehow save the original location and have it float back there?

    2) Is there another way so that only the span floats, and the link itself stays? I tried moving it outside of the span, but then it did not function when rolling over the link. PS, the span is a block element in the CSS, and I want the link to activate the floating, not the image itself.

    3) Is there any other way to simulate this effect? I know other frameworks are out there, but I'll take suggestions or ideas?

    Thanks!
    Last edited by gnomeontherun; 11-29-2008 at 12:16 AM.
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #2
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    Alright I came up with something that works, but isn't exactly what I'd like. I have decided that I can live with the image not floating back to its original position. I have isolated the image from the text by doing this.

    Code:
    #portfolio-cloud {
    	background-image: url("../images/portfolio_bg.png");
    	background-repeat: no-repeat; 
    	width: 124px;
    	height: 35px;
    	display: block;
    	text-align: center;
    	padding-top: 35px;
    }
    
    #portfolio {
    	position: relative;
    	top: -37px;
    	padding-left: 28px;
    }
    
    
    <span id="portfolio-cloud"></span><a href="#" id="portfolio" onmouseover="FloatCloud('portfolio-cloud');" onmouseout="StopFloatCloud('portfolio-cloud');">portfolio</a>
    EDIT:

    Persistence is the key!

    Solved by this code. Basically I added 'afterFinish' to the last queue item to loop the animation. Also, I found that by clearing the queue on mouseout and by using one last Effect.Move with 0,0,'absolute' returns it to its original location.

    Code:
    function floatCloud(element){
    	new Effect.Move(element, { x: 6, y: -3, mode: 'relative', duration: 1.0, queue: { position: 'end', scope: element } });
    	new Effect.Move(element, { x: -4, y: 5, mode: 'relative', duration: 1.0, queue: { position: 'end', scope: element } });
    	new Effect.Move(element, { x: 5, y: 2, mode: 'relative', duration: 1.0, queue: { position: 'end', scope: element } });
    	new Effect.Move(element, { x: -7, y: -4, mode: 'relative', duration: 1.0, queue: { position: 'end', scope: element }, afterFinish: function() { floatCloud(element); } });
    }
    
    function stopFloatCloud(element){
    	var queue = Effect.Queues.get(element);
    	queue.each(function(effect) { effect.cancel(); });
    	new Effect.Move(element, { x: 0, y: 0, mode: 'absolute', duration: 1.0 });
    }
    Last edited by gnomeontherun; 11-29-2008 at 12:15 AM.
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.


  •  

    Posting Permissions

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