Today we’re going to explore a trend that is gaining popularity in web design today: Cinemagraphs.
What is a Cinemagraph?
Cinemagraphs are mostly still photographs in which a small part of the photo moves, forming a very short, looping video. Cinemagraphs can be in either video or GIF format.
Cinemagraphs in Web Design
Web designers are starting to use cinemagraphs in their designs in order to catch the eye of the viewer in a way that a still image can’t. The human eye loves motion. Cinemagraphs are very short and load much faster than a full video, and can grab the attention of the viewer very quickly when used as a banner or hero image.
Digital ads using cinemagraphs have been proven to be more effective than still images and are starting to be used more widely on social media platforms.
How to Make Your Own Cinemagraph
Watch the following tutorial from Aaron Nace on creating a cinemagraph using Photoshop:
Either create your own video content, or find royalty-free footage online. One good source is: Videvo
Edit the file using photoshop and export to video format.
Add it to your website using the HTML5 video element. Set the options to autoplay and loop.