This is not rolled into an Action yet, but I wanted to get it out there and get some comment. I’ve had a whole lot of requests for a carousel that would not whip backward at the end of the strip. I had a thought about that a couple of days ago, and made a little proof of concept script to make it work. I still have to rip apart Carousel and get it to build one of these, but in the meantime, here’s the way to do it:
Paste that into Protaculous, and choose scriptaculous-packed as your library. The last two lines are example calls to the function, they do not need to be in your page unless that’s what your elements are named.
The construction you need is extremely important. Follow these steps precisely, and the effect will work. Ignore any step at your peril!
-
Draw a layered HTML box on the page where you want the effect to appear. If you want a border, add one to that element. Set the Overflow on this box to Hidden. While that element is selected…
-
Choose the HTML tool again, and draw a second box entirely within the first box. This is a nested positioned child. While that second element is selected…
-
Use the Inspector to set the following properties: left=0, top=0.
-
Next decide if you are animating horizontally or vertically. If you’re animating horizontally, then (still in the Inspector) set the width to [number of panes] x pane width, and the height to the pane height. If you’re animating vertically, then do the opposite. This box will appear to stick out of the box you made in step 1. Do not be afraid. While that inner box is selected…
-
Press Return, which gives you a text cursor. Choose Insert / HTML Item. Click on that 100px box and set its height and width to your desired pane size (the same as the box you drew in step 1). Use this box to make your first pane, then copy it, double-click inside the box you made in step 2 and paste as many times as you have remaining panes. Alter them to become the other panes.
-
Go back to Protaculous and alter the example code to reflect the name of the box you made in step 1, your desired direction and other options, and preview. For example:
$(‘item2’).moebius();
This makes a vertical animation at 5 second intervals, with animations that last 4 tenths of a second each. You can change this to:
$('item2').moebius({
duration: 1,
interval: 2,
direction: horizontal
});
And that gets you an animation that takes 1 second to animate, changes every two seconds, and moves horizontally.
Oh, and that reminds me. If you are doing a horizontal animation, you have to set all of your pane elements created in step 5 to Float: Left.
You can have as many of these on a page as you can stand, they can animate at different intervals and in different directions.
Here’s how the trick works: The script copies the first element you added in step 5 and pastes it at the end of the strip (and adjusts the width or height of the strip to match). When the last (duplicate) element has finished scrolling into view, the strip is snapped back to 0 with no delay or animation. So the last frame (the duplicate) is only really visible while it is moving, and the moment it stops, you’re really looking at the first frame again.
Have fun with this, and if you have any ideas for controls or effects, please let me know.
Walter
dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options