Skip to content

Latest commit

 

History

History
51 lines (33 loc) · 2.14 KB

README.md

File metadata and controls

51 lines (33 loc) · 2.14 KB

Check this project on Dribbble.

License

Bouncing carousel

Introduction

The bouncing carousel is an experiment with SVG animations technology. Inspired by Carousel.

Animation, used in the carousel is based on Animation SMIL specification. All the SVG elements can be stylized using CSS, you can also create animations with CSS, but there are such properties in SVG that 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 councing carousel <animate> tag is used, which allows to animate SVG without using a cumbersome JS-code, but only by :hover pseudoclass on the carousel element.

Visually, the desktop version creates an effect similar to the "pocket".

For the gallery images png, gif formats are preferred thus formats supporting transparency - this will allow the objects in it to look as effective as possible.

Carousel is ideal for the e-commerce focused websites.

See, how it works (demo)

https://agilie.github.io/Bouncing-Carousel/

Troubleshooting

Problems? Check the Issues block to find the solution or create an new issue that we will fix asap. Feel free to contribute.

Author

This mini-project is open-sourced by Agilie Team [email protected]

Contributors

Tatiana Kushnir

Sergey Melashych

Contact us

If you have any questions, suggestions or just need a help with web or mobile development, please email us at [email protected]. You can ask us anything from basic to complex questions.

We will continue publishing new open-source projects. Stay with us, more updates will follow!

License

The MIT License (MIT) Copyright © 2017 Agilie Team