> "transitions" API:
>
Actually, the API was never documented. The whole project was more of a
proof of concept and me just experimenting.
>
> 1. Can I remove the animation options and just keep one specific cross-
> fade transition? [I assume by commenting out the superfluous code in
> "transitions-site.js", and the other two .js files if required. Though
> I realise one of the other two .js files being the MooTools library, I
> that I don't touch that one.]
Absolutely. The code was never intended to be used in that manner. The
"Animation Options" was used to show case all the configuration options. It
also sets a cookie and reloads your previous settings if found. If you look
at your code you will see that you create a new
new MatrixControlPanel('slideshow');
Not what you want. MatrixControlPanel is a wrapper around MatrixTransitions.
What you need to know are the options and how they are used.
width: 20 // default in px
height: 20 // default in px
These two options control the size of each square. The smaller the better
the animation looks, but the more of a cpu hog the script becomes.
duration : 1000 // default in milliseconds
This controls how long it will take a transition to complete.
delay : 40 // default in milliseconds kinda like fps defaults = 25 fps.
images : [] // array of images you want to cycle through
wait : 3000 // time to wait on an image after transition completes before
starting the next
fade : false // default if set to true puts an opacity fade animation in.
Very high CPU usage, only good on fast modern computers and browsers.
effect : 'random' // default choices are ( 'sweep', 'blinds',
'disolve','gobble','random' )
each effect has its own options. Yeah I know the interface is messy, and the
code could be refined.
'gobble' : 'random' // either random or a number. IF a number its the amount
of blocks it gobbles at a time. Think in squares 1, 2, 4, 9 are ideal
'blinds' : 'random' // other options are 'l','t','r','b' for left, top,
right and bottom.
'disolve' : 'random' // other options are a number. If a number that
represents the number of blocks to dissolve at a time.
'sweep' : 'random' // other option is an [x,y] array. This will we the
starting point withing the grid (row,col) where the sweep starts from.
>
> 2. I want to get two, three, or four transition examples on a page set
> up. Can I apply a "Before" and an "After" button bottom left of each
> example so that users can apply the transition? This means I disable
> its present time-based transition and replace with a JS "on-click"
> function. But can it be applied to what Nathan has written?
While you can do this with the Transitions it would probably lead down the
road to some hacking. I never got around to adding events. I would recommend
that you check out Pat's Fx.Blocks <http://b22222.com/files/mooblock.html>.
He did a way better job at abstracting the effects out. However, I don't
believe Fx.Blocks has an option to turn off the 'fade'. This makes it very
cpu intensive and not ideal in a general settings. He uses a different
approach as well to accomplish the same thing. He uses css 'crop' to
achieve his blocks I use background-position offsets. I am trying to
determine with some tests which one is more efficient. I'll let you know my
findings.
> 3. Can the "Before" and "After" states re-size? Or are you limited to
> a static DIV and just applying "no-repeat" to prevent the background
> image toggling? Nathan refers to implementing "add-ons". But, as
> you've already guessed, my JS/MooTools is limited and I don't know if
> this kind of manipulation of Nathan's very sexy work is possible.
Could you? yes. Is it worth it no. It is important when implementing
javascript that you find the solution that works best for your design and
audience. Restraint is a virtue in our field.
Other things worth mentioning. CSS can screw this thing up really fast if
your not careful. If your implementing this for a client I would recommend
going with a more conservative approach, there are a lot of really good
mootools image slideshows out there that have better hooks. If your client
cannot live without this effect then as much as I hate to say it, I would
consider using a flash alternative.
