From our monthly sponsor: Automate manual QA and catch visual bugs with Percy’s all-in-one visual testing and review platform.
Today we’d like to share a little effect with you that you might have already stumbled upon on the Web. It’s a kind of a mirror effect as seen on sites like Corentin Fardeau and Method. They are really interesting and gorgeous looking effects, check them out:
The idea is to mirror an image within the context of a slideshow or just as decoration. For showcasing this, we’re using a slideshow with three simple examples, each one showing a possibility of the effect.
In the first demo we don’t separate the mirror images completely, in the second one we show a vertical example, and in the last one we play with a blend mode and separate the two sides visually. The last example also has a bit of movement, just move around with your mouse to see the effect.
Check out the code examples in the download package to see how you can create your own effects.
References and Credits
- anime.js by Julian Garnier
- imagesLoaded by David DeSandro
- Photos from Unsplash.com and Pexel.com, licensed under CC0
- Sound waves from Freepik.com. See the license file within the images folder.
- Veggies from Freepik.com. See the license file within the images folder.
- Background from Freepik.com. See the license file within the images folder.
- Play Button by Madebyolive from Flaticon.com
We hope you like the effect and find the examples useful!