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.


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.

comments powered by Disqus
Cf68cdaaf75f9cd1417267c6b1cafb3813c488a1 Virtual Reality Applications
Augmented reality apps are widely used – from geolocalization to using it in gaming industry. Augmented reality app is a new way to access data determined by environment conditions.
754d17aa02f8c56a0e0b671d45bf2455f6177062 Agile Methodology (Scrum)
Scrum is the very popular agile methodology for managing product development and project delivery. Scrum is the framework that could be applied for the development of product use cases, different projects or entire products.
1a1b621bfd24aba09a56bb25cf18719ad46ef190 News App Development
Smartphones are regularly used everywhere & anytime: in cars, on the way to the office, during the rest on holidays or weekends. That’s very convenient way for users to access important or just fun information with the help of news mobile app.
D63ac21dfd17c4acc93d52d9bdc72fea10e84edd Geolocation Services in Mobile Tracking Software
Geolocation services are used by many mobile apps, websites, mobile operators etc.