Spry Parallel Cluster effects

Fade & Grow parallel cluster effect

The Cluster allow you to run multiple Animation in parallel. You'll have to define these animations and register using the addParallelEffect() method to a cluster. When you'll call the start() method all the effects will be executed at the same time. If the cluster is allowed to toggle the effects will be run in the reverse order. Every cluster registered effect should also receive the toggle parameter to know that can run in reverse too. The observers register to the cluster will work as for any other effect.

Click here to apply Fade and Grow to the below paragraph.

Lore Ipsum Content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce vel sem nec massa cursus interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Duis euismod eros consequat nibh. Pellentesque non purus. Nam lectus magna, faucibus vel, aliquet id, commodo vitae, elit. Maecenas sollicitudin, nibh iaculis bibendum consequat, odio erat volutpat ipsum, sed dignissim ligula mi in justo. Nam placerat. Nullam fringilla tortor. Quisque lacinia, mi non iaculis adipiscing, turpis lacus eleifend velit, dictum facilisis pede diam sagittis nulla. Nunc vestibulum elementum enim. Etiam lorem felis, faucibus sit amet, vulputate sed, lobortis et, nunc. Morbi vitae lectus.

Using the parallel cluster effect as a transition between images

Suppose that once we have the above effect in place, we want to use it as a transition between the images in a slideshow, when the user mouses over the images. We need to apply this effect twice:

The images are loaded with an XML data set and used in a master/detail region. The region shows the thumbnails of the images, while the detail region is used for a bigger version of the image being currently hovered with the mouse.

The step-by-step approach is as follows:

To see the effect, move your mouse over the images.