Today we’d like to share an experimental slideshow with you. The idea is based on the great navigation concept from the Wild website where one can view the projects in either fullscreen or in a carousel mode. There are different techniques that would allow for such a layout; we tried to re-create this slideshow concept by using the Dragdealer.js library and 3D transforms. The main idea is to translate the slider on the Z axis, allowing it to be either fullscreen or of a smaller carousel size. By switching the actual size of the slideshow and removing the transforms when they are not needed anymore, we allow the slideshow to have a “real” size (i.e. 25% of the window). For the content part, we slide everything up and reveal a scrollable area.
Please note that this slideshow is highly experimental and only works properly in modern browsers.
The images used in the demo are from Unsplash.com.
When the slideshow is loaded, we show some info initially, that shows which interaction possibilities exist:
The main view of the slideshow is the fullscreen one. This is the only view shown for mobile:
When clicking on the arrow button, the content will be revealed in a sliding transition:
When clicking on the button for the view switch, the slideshow will be “zoomed out” to a smaller version:
Please note that at the time of release, Firefox (30.0, Mac & Windows) was the worst performing browser with issues around using 3D transforms, animations and transitions. Although we tried to fix all issues, some effects might not work properly.
We hope you enjoy this experiment and find it inspiring!
Ideas for Subtle Hover Effects
