Slideshows can be used on all kind of websites and we do not have to follow any rules how slideshows should look as long as they bring us what their goal is: the interest of our visitors! One clear advantage of using a slideshow is that website owners can place different types of information in it (images or pictures, posts or blogs, variety of news as well as information about different types of products and their features).
Sliders can run slides automatically without user input by moving slides on a pre-defined time interval. Sliders can also respond to user interaction like click or swipe to view next or previous slides. Additionally, sliders can also have buttons or thumbnails which users can click to view a particular slide in the slider.
As said, when it comes to sliders design, everything is possible and in any case, smartly designed and well-programmed slideshow can make your web page to look more attractive. Today I want to share a neat experiment that simulates few effects parallel on the slideshow, such as blur, zoom and x-axis transitions for multiple elements simultaneously. I made animations with GSAP's TweenMax and TimelineMax and blur effect with simple CSS filter.
As the main effect for previous and next image, I used a blur effect made with CSS filters and zoom effect made with GSAP's Tweenmax and TimelineMax. Of course, previous and next image, as well as this blur and zoom effects you can see every time a button "next" or "previous" is clicked and the slide, is switched in a slideshow. As you can see in the demo, along with blur and zoom effects come x-axis transitions for multiple contents in the slideshow. One extra animation comes for "learn about" holder and here it is especially that this holder, whenever a slide changes, changes the background color to the corresponding color of the active slide. Each slide in the HTML structure has one data attribute in which we place the HEX color code that should be displayed in this section each time the slide changes.
I hope you liked my experiment and find it inspiring and useful!
References and Credits
- The inspiration for effects and Layout comes from Gil
- TweenMax and CSSPlugin by Greensock
- imagesLoaded by David DeSandro
- Image by Unsplash.com
- Fonts Karla and Montserrat by Google Fonts
- Simple Loader by loading.io
- Arrow icons for slider navigation by Elegant Themes from Flaticon are licensed by CC 3.0
- Arrow icon for “Learn more” section by Freepik from Flaticon are licensed by CC 3.0