Effects of the jQuery Cycle
The jQuery Cycle plugin allows developers to create slide shows for Web pages, in which each item transitions into the next. Web pages can use a variety of transition effects for this process. The Cycle plugin includes many effect options developers can choose from, including fading, sliding, zooming and shuffling.
Other People Are Reading
-
Blind and Cover
-
The Blind effects in the jQuery Cycle plugin include blindX, blindY and blindZ. The blindX effect involves the next item sliding in along the "X" axis as the present item slides out. The blindY effect does the same, but along the "Y" axis, and blindZ creates the effect diagonally. The Cover effect is similar to the Blind effect, with each item disappearing before the next one slides in.
Scroll and Turn
-
The Scroll effect involves the current item sliding out of view as the next item slides in, with no empty space between them. This effect's options allow developers to choose which direction or axis the items scroll in and out of view in, including up, down, left, right, horizontal and vertical. The Turn effect is similar to scrolling, with one item squeezing along a particular axis until it disappears to make way for the next.
-
Slide
-
Slide effects include slideX and slideY. The effect involves one item moving out of view in the same direction as the item moving in. For example, with slideX, the current item slides off to the left and the next item also slides on from the left. With slideY, the effect works the same way but with items moving in and out from the top of the Web page element.
Grow
-
The growX and growY options work by growing an item from a fine line to full size over the course of the effect. For example, with growX, one item appears on top of the other, starting as a vertical line and growing along the "X" axis until the previous item is totally obscured. The growY effect does the same, but with the item growing gradually along the "Y" axis, starting with a horizontal line across the middle of the current item.
Other
-
The jQuery Cycle plugin provides a number of additional effects for slide-show transitions. The Curtain effect involves one item shrinking along one axis as the next grows along the same axis. The Fade effect simply fades one image out to reveal another, while the FadeZoom effect fades an image while growing it to full size from a central point. The Toss effect is one of the more unusual options, with the current image being "tossed" out of view to reveal the next.
-
References
Resources
- Photo Credit Comstock Images/Comstock/Getty Images
