Home   →   Blog   →   A New Template for Creating Image Galleries

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.

Next Posts
7c5a498bcb2ed3c81303f9531c1e0f23889b54e7 GOBUTTON Plugin. Diversify the Waiting Process
Usually, people don’t like to wait and do “nothing”. However, very often it’s inevitable. That's why one needs to make this time as pleasant or at least tolerable as possible. And this is especially true when developing applications, for it's very importa
1667ad31373295eafe858140ded0c8f8726db22f The Layout Testing
Testing web projects includes a number of different stages. But now we're going to discuss only one of them, namely - the layout testing.