BOUNCE GALLERY

This is a gallery with bounce animation for showing the objects. We have these features in this file.

1. Show only thumbnails – Show only thumbnails, and when a thumnail is clicked, all the objects bounce togerther, and then, a paper bounces right in the center of the screen showing the bigger size of the image with title and description too.

2. Both thumbnails & balls – Show both the thumbnails and balls together. When the ball is clicked, nothing happens but all the objects(balls & thumbnails) bounce on the floor. But, the click on the thumbnail works same as the point one.

3. Only balls – Show only balls and we can use this as a background on our website, so that the users can play clicking on them. Or, if you have a better use in your mind…

NOTE : To have a better idea about the first three points please have a look at the examples by clicking the buttons given on the top of the preview. I have also put the preview file with the main files.

4. Bigger image gallery too – When we click on the image on the paper or the fullscreen botton at the bottom-left corner, the image shows up in the full space specified for the gallery. There come two buttons(next & previous), so that, we can easily see the other images while you are in the fullscreen mode, whithout going back.

5. We can modify the gallery to function the way we like using these 10 settings via xml:
a. ballscount – default(0) – Specifies the number of balls to be shown on the gallery. Give 0 if you want no ball to appear with the thumbnails.
b. initialY – default(50) – Specifies the starting top position from where the objects start being put.
c. showdelay – default(5) – Delay before showing each object
d. pagespeed – default(10) – Bounce speed for the page
e. ballspeed – default(3) – Bounce speed for the balls and the thumbnails.
f. initialScale – default(20) – Starting scale of the objects. This helps in controlling the size of the objects from top to bottom.
g. ballcolor – default(red) – Specifies the color or the balls. Use random if you want to have the balls’ color randomly generated each time. Colors integrated are red, green, yello, gray, lightgray.
h. heightpart – default(3) – The part of the height to be used for the objects showing on the stage. For eg. If we give 3 then the 3rd part of the full 100% is used for the balls and thumbnails.
i. width – default(undefined – So the full stage width is used) – Width of the gallery. If you don’t give anything, then the gallery shows in the full space available. The same thing appiles to the height.
j. height – default(undefined – So the full stage height is used) – Height of the gallery.

6. We can put as many balls and images on the galleries as we like, via xml.

Keywords: image gallery, ball gallery, balls, bouncing, bounces, bouncing animation, bouncing images, full screen gallery, xml gallery

Galleries

Text Animations

Clocks

Preloaders

Others

Posted about 1 month ago