jQuery 1.4 Animation Techniques - Index of

[ 259 ]
Chapter 9
At this point the flat image has been skewed to the left, resized and translated, and the
preFlat image has been skewed back to zero, resized and translated. Both the flat and
preFlat images are transformed together at the same time, which is why the function is
as large as it is.
Right at the end of the skewRTL() function, defined after the skew() function that will be
repeatedly called by the setInterval() function, we initialize the 3rd and 5th values in
the preMatrix array so that the array will contain the correct skew for the initial state of
the element. When we create the array, by copying the original matrix array used when the
widget is initialized, these items will both be set to 0.
Before calling the setInterval() function on the two images to be skewed, we first
check that an interval doesn't already exist. This stops the widget from breaking if the link
is repeatedly clicked by the visitor. The element will be skewed more than once if the link is
clicked several times in rapid succession, but the widget will continue to function and the
page will not throw errors.
Time for action – skewing an element from left to right
We can now add the function that skews an element from left to flat and from flat to right.
This function is very similar to the function we just looked at. Changes in the code are shown
in bold:
function skewLTR() {
var flat = flow.find(".flat"),
preFlat = flat.prev(),
flatMatrix = matrix.slice(0),
preMatrix = matrix.slice(0),
flatDims = 200,
preDims = 170,
skew = function() {
if (preFlat.length) {
if (flatMatrix[3] >= -30 * oneRad && flatMatrix[5] >=
-10 * oneRad) {
var preTranslateX = parseInt(preMatrix[9].
split("p")[0], 10),
preTranslateY = parseInt(preMatrix[10].
split("p")[0], 10);
flatMatrix[1] = flatMatrix[1] - 0.001;