UIZE JavaScript Framework

JAVASCRIPT EXAMPLES Deck Swapper

In this example, an instance of the Uize.Widget.Swap.Deck class is wired up to a deck of divs in the document in order to provide a JavaScript animation transition effect when swapping from one item in the deck to another. Making the widget switch to another item with an accompanying transition effect is as simple as setting the widget's itemNo state property. Use the buttons below to switch among the different items in the deck.

Flock of Clouds
An aerial view of a flock of fluffy white clouds travelling across the oceans of the Caribbean. The beautiful turquoise water is so clear and the landmass so shallow that you can see the sand banks.
© Chris van Rensburg
Hook in the Wall
A single lonely hook is lost amongst a matrix of bricks. An outdoor lamp dimly lights the nighttime air and casts a gold hue over the scene. The unused hook stands out like a weed in a dirt field.
© Chris van Rensburg
Pier Before the Storm
A wave starts to break at the rust-stained concrete Pacifica Pier. In the foreground, the frothy remains of an earlier wave break churns away. The dramatic winter sky looks ready to burst with rain.
© Chris van Rensburg
San Fran Sunset
The setting sun flares through a gap between buildings at the Civic Center in San Francisco, California. Silhouetted buildings evoke mystery, while rows of lights echo the line of the sun flare.
© Chris van Rensburg
Setting Below Clouds
The winter sun sets below a dramatic bank of heavy clouds that head an incoming storm, while a solitary tree on a hillside watches on. The ocean is set alight with a path of shimmering orange.
© Chris van Rensburg
Windswept and Alone
A windswept tree stands lonely on a lush green hillside. Captured while hiking one afternoon at Milagra Ridge, Pacifica.
© Chris van Rensburg