Full Image Reveal Effect
Publikováno: 12.6.2018
A simple fullscreen image reveal effect where thumbnails slide out of the viewport to reveal a larger image.
Full Image Reveal Effect was written by Mary Lou and published on Codrops.
Today we’d like to share a simple fullscreen image reveal effect with you. The idea is to have an inital thumbnails layout at the bottom of the page and then animate the items when we click them. A covering element comes sliding in and when it moves out, the fullscreen image view is shown behind. We are using TweenMax for the animations.
The initial inspiration for this effect comes from Zhenya Rynzhuk’s Dribbble shot Harley Weir Personal Promo Website Scroll Animation.
The initial thumbnail layout view looks as follows:
When we click on an item, we move the thumbnails up and reveal the fullscreen image:
We hope you enjoy this little experiment and find it useful!
References and Credits
- Images from Unsplash.com
- TweenMax by Greensock
- imagesLoaded by Dave DeSandro
Full Image Reveal Effect was written by Mary Lou and published on Codrops.