https://github.com/agilie/bouncing-carousel
The bouncing carousel is an experiment with SVG animations technology.
https://github.com/agilie/bouncing-carousel
animation carousel css html js svg
Last synced: about 1 year ago
JSON representation
The bouncing carousel is an experiment with SVG animations technology.
- Host: GitHub
- URL: https://github.com/agilie/bouncing-carousel
- Owner: agilie
- License: mit
- Created: 2017-05-25T14:27:49.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-06-19T12:20:21.000Z (about 9 years ago)
- Last Synced: 2025-04-19T21:24:48.287Z (about 1 year ago)
- Topics: animation, carousel, css, html, js, svg
- Language: CSS
- Homepage: https://agilie.com
- Size: 5.12 MB
- Stars: 14
- Watchers: 7
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.MD
Awesome Lists containing this project
README
Check this project on [Dribbble](https://dribbble.com/shots/2637299-Carousel).
[](https://github.com/agilie/Bouncing-Carousel)
# Bouncing carousel
## Introduction
The bouncing carousel is an experiment with SVG animations technology.
Inspired by [Carousel](https://dribbble.com/shots/2637299-Carousel).
Animation, used in the carousel is based on [Animation SMIL](https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_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 `` 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](https://github.com/agilie/Bouncing-Carousel/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](https://www.agilie.com)
## Contributors
[Tatiana Kushnir](https://github.com/tatiana-kushnir-89)
[Sergey Melashych](https://github.com/SergeyMell)
## Contact us
If you have any questions, suggestions or just need a help with web or mobile development, please email us at . 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.MD) License (MIT) Copyright © 2017 [Agilie Team](https://www.agilie.com)