Animating an SVG Menu Icon with Segment

Animating an SVG Menu Icon with Segment

A tutorial on how to implement an animated menu icon based on the Dribbble shot by Tamas Kojo using SVG and Segment, a JavaScript library for drawing and animating SVG paths.

CircletPreloader jQuery Plugin

CircletPreloader jQuery Plugin

CircletPreloader is a small jQuery plugin that for as circular loading animations show depict the state of charge of various HTML DOM elements as a percentage.
The aim was to get along with as few KB, while flexibility as regards the possibilities for the representation of the loading animations. The minifie JavaScript file is only 2, 74 KB hard and needs no other and / or external JavaScript libraries. One can CircletPreloader even without jQuery use and is therefore completely independent. Using various parameters can be the loading animations individualize a large scale.

Lobibox : jQuery Notification plugin

Lobibox : jQuery Notification plugin

Lobibox  is a responsive jQuery notification plugin.Lobibox is divided into two parts Messageboxes and Notifications.

Features:

  • Different color support
  • Possibility to show in any corners of the screen
  • Delay
  • Show delay indicator
  • Show with image
  • Sound support
  • Size support. You can show notifications of different size

Ion.PhotoZoom : jQuery Lightbox Plugin

Ion.PhotoZoom : jQuery Lightbox Plugin

Awesome lightbox with polaroid-like zoom effects. Beautiful way to present your photo gallery on any web site. From small mobile screen to large, hidpi desktop screen. Unique super fast flipping speed, several build in skins and much more.

  • HTML5 + CSS3
  • jQuery only
  • Auto sizing
  • Auto centering
  • Responsive design
  • Cross browser IE9+
  • Normalized images size
  • Keyboard and mouse controls
  • Preloading neighbour images
  • Beautiful effects

Animated Arrow Navigations With FlexSlider And CSS3

Animated Arrow Navigations With FlexSlider And CSS3

All of you should be quite familiar with Codrop’s  “Arrow Navigation Styles” tutorials. They are really inspiring and creative. I played with the Arrow Navigation styles demo, I’m impressed. And I wondered how hard would it be to really implement it on Slider without actually create a slider that does that. First slider that immediately came into my mind is FlexSlider.

Interactive Room Display with JavaScript & CSS

Interactive Room Display with JavaScript & CSS

Today we’d like to share a little experiment based on a Dribbble shot by Bilal Mechairia’s, called “Spaces”. The idea is to show an interactive room with several items that all float in 3D space and move according to the position of the mouse. Once an item is clicked, more details pop up. Navigating between the room “slides” will rotate the different wall sections and add some interesting dynamic to the whole thing.

Twitter Heart Button CSS3 Animation

Twitter Heart Button CSS3 Animation

Today twitter has been introduced a new heart (like) button, it is actually a replacement for favorite button. I love the way twitter has implemented cool animation effect for click action. This post will explain you, how to implement this using CSS3 and Jquery.

AcroGrow.js : jQuery Plugin for (non)sense of Internet Acronyms

AcroGrow.js : jQuery Plugin for (non)sense of Internet Acronyms

A jQuery plug-in that makes (non)sense of internet acronyms.

  • Replaces acronyms within specified elements with random nonsense words OR actual definitions.
  • Define custom acronyms list & associated definitions.
  • Separate name-spaced CSS file for easy customization & debugging.

jQuery Inline-edit Plugin

jQuery Inline-edit Plugin

A jQuery plugin to manage inline edit.

Cohesive Colors Tool

Cohesive Colors Tool

A tool for creating more cohesive color schemes. Pick a bunch of random colors that you like and add a touch of magic.