A New Template for Creating Image Galleries

One often has to design image galleries when creating sites. Therefore, we believe our template called Bouncing carousel will be useful in your web development practice.

We're happy to share with you this template designed for websites and aimed to help you create spectacular image galleries.

Read all the details below.

What is Bouncing carousel?

This image gallery is a carousel of visual objects partially hidden behind the bottom "ribbon". Visually, the desktop version creates an effect similar to the "pocket". And if you want to see the entire object, hover the mouse cursor over it: the element will come to the forefront, approaching the viewer. You can see how it works here.

How to use?

Use this template whenever you want to create a vivid and memorable image gallery.

Bouncing carousel is a perfect choice for the e-commerce focused websites. For example,  you can design the online store catalog of products using this unusual gallery. Such a presentation of visual content will attract attention and improve chances of turning a user from a potential customer into a real buyer.

Details

The Bouncing carousel is an experiment with SVG animations technology inspired by Carousel.

The animation used in this carousel is based on Animation SMIL specification. All the SVG elements can be stylized using CSS, you can also create animations through CSS, but some of the properties in SVG greatly enhance its capabilities. For example, the "path" attribute has a data set that defines the object's path, and this data can not be changed through CSS.

In the bouncing carousel, we use the <animate> tag which allows animating SVG without using a cumbersome JS-code, but only by :hover pseudoclass on the carousel element.

Image Format

The optimal image formats for this gallery are gif and png. Due to supporting transparency, they allow the carousel objects to look the most effective.

You can find more information here.