Using slideshows or sliders within web design is an effective method of highlighting your portfolio projects, eCommerce products or even key site related messages and information. As the current landing page design dictates trends, they are typically found above the fold on the homepage. This time we decided to build creative carousel or slider with anime.js and to give you maybe some inspiration for your next project or just header section.
Attention: Note that we use modern CSS properties in this demo.
The slider is circular with individual animation for the main product, background & foreground images, the main headline, and the box for extra details.
The idea for this circular slider comes from Sergey Zhukov dribbble shot ( link can you find in the Resources and Credits section ).
I hope you will find this circular slider interesting and inspirational.
References and Credits
- The inspiration for effects and Layout comes from Sergey Zhukov
- anime.js by Julian Garnier
- bottles by GraphicsFuel
- apple designed by Pressfoto from Freepik
- strawberry designed by Topntp26 from Freepik
- grapes designed by Mrsiraphol from Freepik
- strawberry on the featured image by prettycons from Flaticon