MODULES Uize.Widget.Swap.Themes
- Contents
- 1. Introduction
-
2. Themes
- 2.1. crossFade
- 2.2. fadeOutFadeIn
- 2.3. fadeOutPauseThenFadeIn
- 2.4. fadeWipeFromLeft
- 2.5. fadeWipeFromRight
- 2.6. fadeWipeHorizontalFromCenter
- 2.7. fadeWipeFromTop
- 2.8. fadeWipeFromBottom
- 2.9. fadeWipeVerticalFromCenter
- 2.10. fadeSlideInFromLeft
- 2.11. fadeSlideInFromRight
- 2.12. fadeSlideInFromTop
- 2.13. fadeSlideInFromBottom
- 2.14. fadeSlideInFromTopLeft
- 2.15. fadeSlideInFromTopRight
- 2.16. fadeSlideInFromBottomLeft
- 2.17. fadeSlideInFromBottomRight
- 2.18. fadeSlideOutSlideInLeft
- 2.19. fadeSlideOutSlideInRight
- 2.20. fadeSlideOutSlideInTop
- 2.21. fadeSlideOutSlideInBottom
- 2.22. fadeSlideOutSlideInTopLeft
- 2.23. fadeSlideOutSlideInTopRight
- 2.24. fadeSlideOutSlideInBottomLeft
- 2.25. fadeSlideOutSlideInBottomRight
- 2.26. wipeOutWipeInLeft
- 2.27. wipeOutWipeInRight
- 2.28. wipeOutWipeInTop
- 2.29. wipeOutWipeInBottom
- 2.30. wipeOutWipeInTopLeft
- 2.31. wipeOutWipeInTopRight
- 2.32. wipeOutWipeInBottomLeft
- 2.33. wipeOutWipeInBottomRight
- 2.34. wipeOutWipeInHorizontalCenter
- 2.35. wipeOutWipeInVerticalCenter
- 2.36. horizontalCrossSlideFromLeft
- 2.37. horizontalCrossSlideFromRight
- 2.38. verticalCrossSlideFromTop
- 2.39. verticalCrossSlideFromBottom
- 2.40. closeToCenterOpenFromCenter
- 2.41. poofPauseThenOpenFromCenter
- 2.42. centerOpenCloseCrossFade
- 3. Static Properties
1. Introduction
The Uize.Widget.Swap.Themes module defines themes for the Uize.Widget.Swap widget class.
DEVELOPERS: Chris van Rensburg
1.1. Using the Themes
The Uize.Widget.Swap.Themes module returns an object, being a lookup of theme names to theme settings objects.
Each property of the themes lookup object is an effect theme, where the name of the property is the effect theme name, and where the value is an object containing values for various state properties of the Uize.Widget.Swap class.
Consider the value of the fadeOutFadeIn theme...
{
crossFade:true,
crossFadeSize:0,
crossFadeAlign:.5,
dissolve:true,
viewContentAlignX:'none',
viewContentAlignY:'none',
viewSeedSizeX:1,
viewSeedSizeY:1,
viewSeedAlignX:.5,
viewSeedAlignY:.5
}
To use this theme, simply use it to set the state properties of the Uize.Widget.Swap instance using the set instance method, as follows...
var themes = Uize.Widget.Swap.Themes (); mySwap.set (themes.fadeOutFadeIn);
1.2. Examples
The following example pages are good showcases for the Uize.Widget.Swap.Themes module...
| Image Cycle - Create a simple JavaScript slideshow experience with the cycling image swap widget. Each image is revealed with a different swap / transition effect. | |
| Uize.Widget.Swap.Image - See some amazing possibilities for image transitions using lightweight JavaScript animation. Play with lots of effect themes, and even make your own. |
SEARCH FOR EXAMPLES
Use the link below to search for example pages on the UIZE Web site that reference the Uize.Widget.Swap.Themes module...
SEARCH
1.3. Implementation Info
The Uize.Widget.Swap.Themes module defines the Uize.Widget.Swap.Themes object under the Uize.Widget.Swap namespace.
1.3.1. Features Introduced in This Module
The features listed in this section have been introduced in this module.
STATIC PROPERTIES
Uize.Widget.Swap.Themes.moduleName | Uize.Widget.Swap.Themes.pathToResources
1.3.2. Features Overridden in This Module
No features have been overridden in this module.
1.3.3. Features Inherited From Other Modules
This module has no inherited features.
1.3.4. Modules Directly Under This Namespace
There are no modules directly under this namespace.
1.3.5. Unit Tests
There is no dedicated unit tests module for the Uize.Widget.Swap.Themes module.
2. Themes
2.1. crossFade
A classic crossfade effect, where the new item fades in on top of the current item.
2.2. fadeOutFadeIn
The current item fades out fully before the new item fades in. Fade out time for the current item and fade in time for the new item are equal and are both half the overal duration for the swap effect.
2.3. fadeOutPauseThenFadeIn
The current item fades out very quickly, there is a slight pause, and then the new item fades in (slower than the fade out of the current item, but still 4/10 the overal duration for the swap effect).
2.4. fadeWipeFromLeft
The new item is revealed with a horizontal wipe reveal that starts from the left edge and that also fades in as it progresses.
2.5. fadeWipeFromRight
The new item is revealed with a horizontal wipe reveal that starts from the right edge and that also fades in as it progresses.
2.6. fadeWipeHorizontalFromCenter
The new item is revealed with a horizontal wipe reveal that starts from the center and that expands outwards towards the left and right edges and that also fades in as it progresses.
2.7. fadeWipeFromTop
The new item is revealed with a horizontal wipe reveal that starts from the top edge and that also fades in as it progresses.
2.8. fadeWipeFromBottom
The new item is revealed with a horizontal wipe reveal that starts from the bottom edge and that also fades in as it progresses.
2.9. fadeWipeVerticalFromCenter
The new item is revealed with a vertical wipe reveal that starts from the center and that expands outwards towards the top and bottom edges and that also fades in as it progresses.
2.10. fadeSlideInFromLeft
The new item slides in from the left edge and also fades in as it slides into place to eventually fully cover the current item.
2.11. fadeSlideInFromRight
The new item slides in from the right edge and also fades in as it slides into place to eventually fully cover the current item.
2.12. fadeSlideInFromTop
The new item slides in from the top edge and also fades in as it slides into place to eventually fully cover the current item.
2.13. fadeSlideInFromBottom
The new item slides in from the bottom edge and also fades in as it slides into place to eventually fully cover the current item.
2.14. fadeSlideInFromTopLeft
The new item slides in from the top left corner and also fades in as it slides into place to eventually fully cover the current item.
2.15. fadeSlideInFromTopRight
The new item slides in from the top right corner and also fades in as it slides into place to eventually fully cover the current item.
2.16. fadeSlideInFromBottomLeft
The new item slides in from the bottom left corner and also fades in as it slides into place to eventually fully cover the current item.
2.17. fadeSlideInFromBottomRight
The new item slides in from the bottom right corner and also fades in as it slides into place to eventually fully cover the current item.
2.18. fadeSlideOutSlideInLeft
The current item slides out towards the left edge, fading out as it goes, and then the new item slides in from the left edge, fading in as it goes. Slide out time for the current item and slide in time for the new item are equal and are both half the overal duration for the swap effect.
2.19. fadeSlideOutSlideInRight
The current item slides out towards the right edge, fading out as it goes, and then the new item slides in from the right edge, fading in as it goes. Slide out time for the current item and slide in time for the new item are equal and are both half the overal duration for the swap effect.
2.20. fadeSlideOutSlideInTop
The current item slides out towards the top edge, fading out as it goes, and then the new item slides in from the top edge, fading in as it goes. Slide out time for the current item and slide in time for the new item are equal and are both half the overal duration for the swap effect.
2.21. fadeSlideOutSlideInBottom
The current item slides out towards the bottom edge, fading out as it goes, and then the new item slides in from the bottom edge, fading in as it goes. Slide out time for the current item and slide in time for the new item are equal and are both half the overal duration for the swap effect.
2.22. fadeSlideOutSlideInTopLeft
The current item slides out towards the top left corner, fading out as it goes, and then the new item slides in from the top left corner, fading in as it goes. Slide out time for the current item and slide in time for the new item are equal and are both half the overal duration for the swap effect.
2.23. fadeSlideOutSlideInTopRight
The current item slides out towards the top right corner, fading out as it goes, and then the new item slides in from the top right corner, fading in as it goes. Slide out time for the current item and slide in time for the new item are equal and are both half the overal duration for the swap effect.
2.24. fadeSlideOutSlideInBottomLeft
The current item slides out towards the bottom left corner, fading out as it goes, and then the new item slides in from the bottom left corner, fading in as it goes. Slide out time for the current item and slide in time for the new item are equal and are both half the overal duration for the swap effect.
2.25. fadeSlideOutSlideInBottomRight
The current item slides out towards the bottom right corner, fading out as it goes, and then the new item slides in from the bottom right corner, fading in as it goes. Slide out time for the current item and slide in time for the new item are equal and are both half the overal duration for the swap effect.
2.26. wipeOutWipeInLeft
The current item wipes out towards the left edge, and then the new item wipes in from the left edge. Wipe out time for the current item and wipe in time for the new item are equal and are both half the overal duration for the swap effect.
2.27. wipeOutWipeInRight
The current item wipes out towards the right edge, and then the new item wipes in from the right edge. Wipe out time for the current item and wipe in time for the new item are equal and are both half the overal duration for the swap effect.
2.28. wipeOutWipeInTop
The current item wipes out towards the top edge, and then the new item wipes in from the top edge. Wipe out time for the current item and wipe in time for the new item are equal and are both half the overal duration for the swap effect.
2.29. wipeOutWipeInBottom
The current item wipes out towards the bottom edge, and then the new item wipes in from the bottom edge. Wipe out time for the current item and wipe in time for the new item are equal and are both half the overal duration for the swap effect.
2.30. wipeOutWipeInTopLeft
The current item wipes out towards the top left corner, and then the new item wipes in from the top left corner. Wipe out time for the current item and wipe in time for the new item are equal and are both half the overal duration for the swap effect.
2.31. wipeOutWipeInTopRight
The current item wipes out towards the top right corner, and then the new item wipes in from the top right corner. Wipe out time for the current item and wipe in time for the new item are equal and are both half the overal duration for the swap effect.
2.32. wipeOutWipeInBottomLeft
The current item wipes out towards the bottom left corner, and then the new item wipes in from the bottom left corner. Wipe out time for the current item and wipe in time for the new item are equal and are both half the overal duration for the swap effect.
2.33. wipeOutWipeInBottomRight
The current item wipes out towards the bottom right corner, and then the new item wipes in from the bottom right corner. Wipe out time for the current item and wipe in time for the new item are equal and are both half the overal duration for the swap effect.
2.34. wipeOutWipeInHorizontalCenter
The current item wipes out horizontally from the left and right edges towards a sliver in the center, and then the new item wipes in horizontally from the same sliver in the center and expands outwards towards the left and right edges.
2.35. wipeOutWipeInVerticalCenter
The current item wipes out vertically from the top and bottom edges towards a sliver in the center, and then the new item wipes in vertically from the same sliver in the center and expands outwards towards the top and bottom edges.
2.36. horizontalCrossSlideFromLeft
The new item slides in horizontally from the center towards the right edge at the same as it grows from a sliver to occupy the entire port, while the current item slides out towards the left edge as it shrinks down to a sliver, crossing paths as they go to produce a kind of sliding doors illusion.
2.37. horizontalCrossSlideFromRight
The new item slides in horizontally from the center towards the left edge at the same as it grows from a sliver to occupy the entire port, while the current item slides out towards the right edge as it shrinks down to a sliver, crossing paths as they go to produce a kind of sliding doors illusion.
2.38. verticalCrossSlideFromTop
The new item slides in vertically from the center towards the bottom edge at the same as it grows from a sliver to occupy the entire port, while the current item slides out towards the top edge as it shrinks down to a sliver, crossing paths as they go to produce a kind of sliding doors illusion.
2.39. verticalCrossSlideFromBottom
The new item slides in vertically from the center towards the top edge at the same as it grows from a sliver to occupy the entire port, while the current item slides out towards the bottom edge as it shrinks down to a sliver, crossing paths as they go to produce a kind of sliding doors illusion.
2.40. closeToCenterOpenFromCenter
The current item wipes out to a point in the center, and then the new item wipes in from the same point in the center. Wipe out time for the current item and wipe in time for the new item are equal and are both half the overal duration for the swap effect.
2.41. poofPauseThenOpenFromCenter
The current item wipes out very quickly to a point in the center, fading out as it progresses, then there is a slight pause, and then the new item wipes in from the same point in the center (slower than the wipe out of the current item, but still less than half the overal duration for the swap effect), fading in as it progresses.
2.42. centerOpenCloseCrossFade
The current item wipes out to a point in the center, fading out as it progresses, at the same time as the new item wipes in from the same point in the center, fading in as it progresses. The wipe out and wipe in cross over each other, producing a pleasing effect.