Animated SVG Frame Slideshow

Animated SVG Frame Slideshow

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

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

AnimSequence : Simple Animation Controller with Timeline

AnimSequence : Simple Animation Controller with Timeline

AnimSequence is a simple lightweight library for high performance animation in a web page, make preparations for each frame and call the frames with optimized timeline for animation.

Sgvizler2 : Javascript wrapper for Visualisation of SPARQL Result Sets

Sgvizler2 : Javascript wrapper for Visualisation of SPARQL Result Sets

Sgvizler2 is a javascript wrapper for easy visualisation of SPARQL result sets (and a jQuery plugin).

Microtip : Minimal CSS Tooptip Library

Microtip : Minimal CSS Tooptip Library

Microtip is a modern, minimal css tooptip library with accessibility baked in. Just `1kb` minified and gzipped.

PlainDraggable : JavaScript Library to Drag HTML/SVG Element

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 requestAnimationFrame API, translate and will-change CSS if possible, for high performance.

LetterPic : jQuery plugin that Converts User’s Name to Userpic

LetterPic : jQuery plugin that Converts User's Name to Userpic

LetterPic is a small jQuery plugin that converts user’s name to userpic, using it’s initials.You can replace any html element with initials based userpic (e.g. George Yakovlev -> GA picture). Another way of using, is to replace broken images by letter userpic.

Most Wanted jQuery Plugins Pack

Most Wanted jQuery Plugins Pack

Almost all the plugins you need to create a complete and professional website are founded in THE MOST WANTED PLUGINS PACK: Premium Sliders, Video Players, Logos Showcase, Full Screen Image Or Video Backgrounds, Audio Players, Radio Players, Carousels, Countdowns.

LeaderLine : Draw a leader line with SVG & JS

LeaderLine : Draw a leader line with SVG & JS

LeaderLine is a script that draw a leader line in your web page with svg and javascript.

Expanding Grid Item Animation with CSS & JS

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.