Below you can find some examples that show you the basic usage of Pieces Plugin.
On document ready Pieces waits for 2 seconds and then performs the IN animation (with fade-in effect) called "pieces1".
This example shows some paramaters we can use. Try clicking on the image.
Pieces is responsive. Try clicking the below image and try to resize your browser (this animation is very slow to allow you to resize the window).
This example performs an IN animation when the image become visible after scrolling the page. threshold:400 means that at least 400px have to be visible to start the animation.
Pieces can also start an animation on mouse over, out and click. The following example performs an animation on mouse over.
In this example Pieces will perform the animation inside a masked box.
There are two callbacks that Pieces can call:
onStart: before the animation starts
onComplete: when the animations has completed
You can also use Pieces with html, simply adding some attributes to your <img> tag. Here is an example.