Today we’d like to share an experimental slideshow with you. The idea is to animate an SVG frame while we transition from one slide to another. Using different shapes we can create a variety of frame styles when morphing the SVG path. We are using anime.js for the animations.
jQuery Plugin to plays Audio & Video on Hover : Media Hovers
Get Motion to your images. Media Hovers is a responsive HTML5 plugin which plays audio and video on hover. It can be applied to any element. Just specify thumbnail and audio or video file and turn it into your hover. Media Hovers also supports lightbox mode where images and videos can be viewed in larger mode.
Features:
- HTML5 video and audio support
- Cross browser compatible
- IOS and Android support
- Font Awesome Library icons
- Mix both audio and videos in the same page
- Optional image slideshows while audio plays
- Social sharing support (facebook, twitter, google plus)
- Lightbox support
PlainDraggable : JavaScript Library to Drag HTML/SVG Element
PlainDraggable is a simple and high performance library to allow HTML/SVG element to be dragged.
Features:
- Accept HTML/SVG element as an element that comes to be draggable.
- Restrict the draggable area.
- Snap the draggable element to other elements, points, lines, consecutive points (i.e. grid) or something.
- Use
requestAnimationFrameAPI,translateandwill-changeCSS if possible, for high performance.
Expanding Grid Item Animation with CSS & JS
Today we’d like to share a simple implementation of a grid animation with you that is based on the Dribbble shot. When a grid item is clicked, the background and the thumbnail are scaled up and moved to their fullscreen position. While the Dribbble shot is an animation for the mobile phone, we thought we could explore this concept for the desktop, too. We are using anime.js by Julian Garnier.