Today we’d like to share a simple hover/click effect for images with you. The main idea is to show a map or a base image with some points of interest (POS) and when we come close to one of these points and hover, an image starts to fade in. When clicking on the POS indicator, a content layer is shown with some more information on that point; the background image becomes completely opaque. This concept could be fitting for some kind of map assisted story telling, like a travel piece or similar.
Wobbly Slideshow Effect is an experimental slideshow effect with you. The idea is based on a Dribble shot called GIF Exercise by Sergey Valiukh where a lot of jell-o-like movements are happening. Navigating from one item to another makes the items move in a wobbly fashion and we thought this might be great to try out on a real slideshow. To achieve this effect we used Snap.svg and animated the slide background SVGs in order to simulate the elastic effect.
Some inspiration for off-canvas menu effects and styles using CSS transitions and SVG path animations. We use CSS transitions, CSS animations created with bounce.js and animated SVGs with the help ofSnap.svg. We also use Font Awesome and the profile picture is from the Random User Generator.