CodeCanyon Animated SVG Browser Icons 10431877

CodeCanyon Animated SVG Browser Icons 10431877JavaScript \ Images and Media
Flat \ Browser \ Modern \ Internet \ Safari \ Opera \ Design \ Compatible \ Chrome

JavaScript - Animated SVG Browser Icons 10431877 by dxc @ CodeCanyon

JavaScript \ Images and Media

Last Update: 15 February 15; High Resolution: Yes; Compatible Browsers: IE9, IE10, IE11, Firefox, Safari, Opera, Chrome; Files Included: JavaScript JS, HTML, CSS; Software Version: Other.

These animated SVG icons are the perfect way to tell your customers that your app, theme, or game works perfectly in all (or some) major browsers. They’re all SVGs (scaleable vector graphics), which means that you can make them any size and show them on any screen (even retina), and they’ll look 100% crisp and clear.

Compare This Scaled SVG to What a JPG or PNG looks like

Easy to Edit
Using these icons is ridiculously easy! Seriously, just add a div with the right class name and we’ll take it from there.
<div class="browsericon chromeIcon"></div>

All the colors are handled right in the CSS so there’s no need to dig through SVG code or open a graphics file.

.browsericon .firefoxIcon .foxBody{
fill:#D97827;
}

Even adding buttons to control the animations is a peice of cake. You can even specify which icons will be affected by putting their numbers in between the brackets.

<button onclick="restartIcons([0,1,2,3,4])">Restart</button>
<button onclick="reverseIcons([0,1,2,3,4])">Reverse</button>

Want to get all crazy and mess with the .js file? It couldn’t be more simple.

var imagesPath = "images/";//path to the images
var delayBetweenIcons = .5;//stagger the animation of each iccon (in seconds)
var useRollover = true;//have an animation on rollover
var hoverScale = 1.2;//how much does the icon grow on rollover
var speed = 1;//speed up or slow down the animations (1 being normal speed)
var playOnStart = true;//play animations on page load

Compatible With All Major Browsers
It’d be pretty funny if these animated browser logos didn’t work in all major browsers, wouldn’t it. Don’t worry, they even work flawlessly in IE and on iOS.

Smooth Javascript Animations
There are no Flash or animated GIF elements here. All of the animations you see are 100% Javascript and don’t require any browser plugins.

This item uses Greensock’s TweenMax for the animations, rather than jQuery. Why? Because GSAP is SOOOO much faster and smoother. See for yourself: jQuery vs GSAP speed test .

Free Flat Icons
If you like the icons used in this preview, check out the free, non-animated versions here. .
Related Items

3D Business Card Flipper; Wordpress Goal Thermometer; jQuery Time Zone World Clocks; jQuery Goal Thermometer; Customizable Analog Clock - jQuery; 

Keywords: animated, browser, chrome, compatible, explorer, firefox, flat, flat design, icons, ie, internet, modern browser, opera, safari, svg.

Download Link

http://codecanyon.net/item/animated-svg-browser-icons/10431877