From our sponsor: Leverage AI for dynamic, custom website builds with ease.
Today we’d like to share a very simple content slideshow with you. The idea is to have circular slides that have a playful bouncy effect when animating to the next or previous item. It’s inspired by a really nice Dribbble shot, Mobile Commerce Interface, by Bilal Mechairia.
When opening a slide item, the circular shape expands similar to the Google Material design effect and some content is slided in from the bottom. Each content element has a bit of a delay. We are using Dynamic.js by Michael Villar as animation library.
Note that IE seems to have some flexbox issues, so centering the column direction does not seem to work properly.
For the demo we have used some bottle mockups by forgraphic.
The initial state of the slideshow looks as follows:
When opening the slideshow, we expand the circle and show some content:
We hope you like this little component and find it useful!
Browser Support:- ChromeSupported
- FirefoxSupported
- Internet ExplorerSupported from version 11
- SafariSupported
- OperaSupported
