Circulate jQuery Plugin

Circulate, a jQuery plugin make your images circulate around your page. This plugin requires the jQuery library as well as the easing plugin, just include a small piece of code to get the images circulate.

READ MORE - Circulate jQuery Plugin

Dojo Lightbox with dojox.image.Lightbox

The dojox.image.Lightbox resource has many cool features:

• Integrated theming and images
• Keyboard accessible
• Resizes when the viewport changes
• Flexible with numerous options
• Declarative or Programmatic instance creation
• Works with Dojo data stores

Let me show you just how easy it is to use Dojo's Lightbox solution!

The CSS

dojox.image.Lightbox
doesn't require any of the Dijit themes but does require its own CSS file:

<style type="text/css">
/* post styles */
#imageHolder img { width:200px; }
/* Lightbox styles */
.tundra .dijitDialogUnderlay, 
.nihilo .dijitDialogUnderlay,
.soria .dijitDialogUnderlay {
background-color:#000; 
}
.claro .dojoxLightbox .dijitDialogCloseIconHover,
.nihilo .dojoxLightbox .dijitDialogCloseIconHover,
.tundra .dojoxLightbox .dijitDialogCloseIconHover, 
.tundra .dojoxLightbox .dijitDialogCloseIconActive,
.nihilo .dojoxLightbox .dijitDialogCloseIconActive,
.claro .dojoxLightbox .dijitDialogCloseIconActive {
background:url('http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/image/resources/images/close.png') no-repeat 0 0;
}
.claro .dojoxLightbox,
.soria .dojoxLightbox,
.nihilo .dojoxLightbox,
.tundra .dojoxLightbox {
position:absolute;
z-index:999;
overflow:hidden;
width:100px;
height:100px; 
border:11px solid #fff !important; 
background:#fff url('http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/image/resources/images/loading.gif') no-repeat center center;

-webkit-box-shadow: 0px 6px 10px #636363; 
-webkit-border-radius: 3px;
-moz-border-radius:4px;
border-radius: 4px;
}
.dojoxLightboxContainer {
position:absolute;
top:0; left:0;
background-color:#fff;
}
.dojoxLightboxFooter {
padding-bottom:5px;
position:relative;
bottom:0;
left:0;
margin-top:8px;
color:#333;
z-index:1000;
font-size:10pt;
}
.dojoxLightboxGroupText {
color:#666; 
font-size:8pt;
}
.LightboxNext,
.LightboxPrev,
.LightboxClose {
float:right;
width:16px;
height:16px;
cursor:pointer;
}
.claro .LightboxClose,
.nihilo .LightboxClose,
.LightboxClose {
background:url('http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/image/resources/images/close.png') no-repeat center center;
}
.di_ie6 .claro .LightboxClose,
.di_ie6 .nihilo .LightboxClose,
.dj_ie6 .tundra .LightboxClose {
background:url('http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/images/close.gif') no-repeat center center;
}
.claro .LightboxNext, 
.nihilo .LightboxNext,
.LightboxNext {
background:url('http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/image/resources/images/right.png') no-repeat center center;
}
.dj_ie6 .claro .LightboxNext,
.dj_ie6 .nihilo .LightboxNext,
.dj_ie6 .tundra .LightboxNext {
background:url('http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/images/right.gif') no-repeat center center;
}
.claro .LightboxPrev,
.nihilo .LightboxPrev,
.LightboxPrev {
background:url('http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/image/resources/images/left.png') no-repeat center center;
}
.dj_ie6 .claro .LightboxPrev,
.dj_ie6 .nihilo .LightboxPrev,
.dj_ie6 .tundra .LightboxPrev {
background:url('http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/images/left.gif') no-repeat center center;
}
.soria .LightboxClose,
.soria .LightboxNext,
.soria .LightboxPrev {
width:15px;
height:15px;
background:url('chrome://interclue/content/cluecore/skins/default/sprites.png') no-repeat center center;
background-position:-60px;
}
.soria .LightboxNext {
background-position:-30px 0;
}
.soria .LightboxPrev {
background-position:0 0;
}
.dojoxLightboxText {
margin:0; padding:0; 
}

</style>

All of the imagery required comes via the CSS file -- no need to add your own styles.

The HTML and JavaScript

The first step in using any Dojo resources is adding a SCRIPT tag with a path to Dojo within the page and requiring the desired Dojo Toolkit resources:

<script>
// Parse the page upon load
djConfig = { parseOnLoad: true };
// When the DOM is ready and resources are loaded...
dojo.ready(function() {
// Create an instance
var lightbox = new dojox.image.Lightbox({ title:"My Sons", group:"My Sons", href:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDGbc_saUj2fvV1InSNkYoxqdNWMIajvVWqoENRZeGA_NKCT6s3u2yQ7A8v9P_u3DcyVO3Jx-zumfhPKR-J0UOWtuGtKSa4CK7cRkkW0Bi-ID9UWCMuYGIUkkKrbFaEDCL9LTBGXKt94SP/s1600/My+Sons+1_490x395.jpg" });
// Start it up!
lightbox.startup();
})
</script>
<!--bring in the lightbox CSS 
<link href='http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/image/resources/Lightbox.css' rel='stylesheet' type='text/css'/>-->
<!--bring in the claro theme
<link href='http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css' rel='stylesheet' type='text/css'/>-->
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" type="text/javascript"></script>
<script type="text/javascript">
// Request dependencies
dojo.require("dojox.image.Lightbox");
</script>

With parseOnLoad in place, you can add links to the page with the data-dojo-type attribute set to dojox.image.Lightbox and instance-specific options within the data-dojo-props attribute.  Here's a sample:

<div id="imageHolder">
<a href="http://bambang-wicaksono.blogspot.com/" data-dojo-type="dojox.image.Lightbox" data-dojo-props="group:'My Sons',title:'My Sons',href:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDGbc_saUj2fvV1InSNkYoxqdNWMIajvVWqoENRZeGA_NKCT6s3u2yQ7A8v9P_u3DcyVO3Jx-zumfhPKR-J0UOWtuGtKSa4CK7cRkkW0Bi-ID9UWCMuYGIUkkKrbFaEDCL9LTBGXKt94SP/s1600/My+Sons+1_490x395.jpg'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDGbc_saUj2fvV1InSNkYoxqdNWMIajvVWqoENRZeGA_NKCT6s3u2yQ7A8v9P_u3DcyVO3Jx-zumfhPKR-J0UOWtuGtKSa4CK7cRkkW0Bi-ID9UWCMuYGIUkkKrbFaEDCL9LTBGXKt94SP/s320/My+Sons+1_490x395.jpg" alt="My Sons" /></a>
<a href="http://template4.blogspot.com/" data-dojo-type="dojox.image.Lightbox" data-dojo-props="group:'My Sons',title:'My Sons',href:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7s14wbE3BaXzFoSGlbxFsKlFVxvobx22yNpmqpE5-HWHZjfF_csKsGQjf3XDZn6lSmOQwIb8kK5ASIvN8kwsz0gRBxD1Jss2fEw-B-cJi01_9lEcBEqLOo1xc9wEmPfpXdiJeNypKxSzl/s1600/My+Sons+4_490x395.jpg'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7s14wbE3BaXzFoSGlbxFsKlFVxvobx22yNpmqpE5-HWHZjfF_csKsGQjf3XDZn6lSmOQwIb8kK5ASIvN8kwsz0gRBxD1Jss2fEw-B-cJi01_9lEcBEqLOo1xc9wEmPfpXdiJeNypKxSzl/s320/My+Sons+4_490x395.jpg" alt="My Sons" /></a>
<a href="http://template4ublog.blogspot.com/" data-dojo-type="dojox.image.Lightbox" data-dojo-props="group:'My Sons',title:'My Sons',href:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSWtLdMpealFTdSYiEdLO4cUsDdtW0s9lUHtZeixi83snZTH0SHRjzweX9me3u1qP8YRCS5c_276o1No2AEcameCF2ru-czGCtteRmRjhhdC7RogpIdTQWmu1Pur3PY-_2uYJdtnp3qsYF/s1600/My+Sons+2_490x395.jpg'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSWtLdMpealFTdSYiEdLO4cUsDdtW0s9lUHtZeixi83snZTH0SHRjzweX9me3u1qP8YRCS5c_276o1No2AEcameCF2ru-czGCtteRmRjhhdC7RogpIdTQWmu1Pur3PY-_2uYJdtnp3qsYF/s320/My+Sons+2_490x395.jpg" alt="My Sons" /></a>
<a href="http://template4.blogspot.com/" data-dojo-type="dojox.image.Lightbox" data-dojo-props="group:'My Sons',title:'My Sons',href:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT1SgDEajl41O5iDF1V5Lh6VcoBKX-3uc-htELxFXdmBnf8DN4C_Y-beA2M4fYkbJBFlsml7i18GKt8KPvYqlwmu1_q87yGh3NbEzLamMyG8CUhaTV3EVzsXWKdazc8aLZJr34aaZohfJG/s1600/My+Sons+3_490x395.jpg'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT1SgDEajl41O5iDF1V5Lh6VcoBKX-3uc-htELxFXdmBnf8DN4C_Y-beA2M4fYkbJBFlsml7i18GKt8KPvYqlwmu1_q87yGh3NbEzLamMyG8CUhaTV3EVzsXWKdazc8aLZJr34aaZohfJG/s320/My+Sons+3_490x395.jpg" alt="My Sons" /></a>
<a href="http://template4ublog.blogspot.com/" data-dojo-type="dojox.image.Lightbox" data-dojo-props="group:'My Sons',title:'My Sons',href:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7s14wbE3BaXzFoSGlbxFsKlFVxvobx22yNpmqpE5-HWHZjfF_csKsGQjf3XDZn6lSmOQwIb8kK5ASIvN8kwsz0gRBxD1Jss2fEw-B-cJi01_9lEcBEqLOo1xc9wEmPfpXdiJeNypKxSzl/s1600/My+Sons+4_490x395.jpg'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7s14wbE3BaXzFoSGlbxFsKlFVxvobx22yNpmqpE5-HWHZjfF_csKsGQjf3XDZn6lSmOQwIb8kK5ASIvN8kwsz0gRBxD1Jss2fEw-B-cJi01_9lEcBEqLOo1xc9wEmPfpXdiJeNypKxSzl/s320/My+Sons+4_490x395.jpg" alt="My Sons" /></a>
</div>

Groups allow you to have images available within...groups... with next and previous buttons.  The title property provides a ...title... and the href property provides the content which should load within the lightbox. You may have any number of groups on the page.  That's all that's needed to create a simple Dojo Lightbox declaratively!

With your instance created, start adding more images:

// Add another image by using the lightbox's _attachedDialog method...
lightbox._attachedDialog.addImage({
title:"My Sons 2", 
group:"My Sons",  // Can be same group or different!
href:"MySons.jpg"
});

Regardless of declarative or programmatic implementation, you can show or hide the lightbox with the respective methods:

// Show the lightbox
lightbox.show();
// Hide the lightbox!
lightbox.hide();

As you'd expect with any Dojo Toolkit resource, dojox.image.Lightbox provides the usual onShow, onHide, and other utility methods that are helpful in customizing the Lightbox usage.

dojox.image.Lightbox and dojox.image.LightboxDialog are great resources available within Dojo's "treasure chest", DojoX. Other classes within the dojox.image namespace include Gallery, Slideshow, and Magnifier.

source article: David Walsh

READ MORE - Dojo Lightbox with dojox.image.Lightbox

Exploding Logo with CSS3 and jQuery

Ryan's CSS animation library, available with vanilla JavaScript, MooTools, or jQuery, and can only be described as a fucking work of art. His animation library is mobile-enabled, works a variety of A-grade browsers, and is very compact.

The HTML

The exploding element can be of any type, but for the purposes of this example, we'll use an A element with a background image:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEq9nXzarHNF_fwrxYIeIiDXTl5tHnzKotenAzrQ5qMTjRWeoPKP-gXmzu-nL5GCfgIBGB4EOQ8XPLfuFvbyjGG4KmL343qTyB7z8bOnSrOHgw5_L1m61QzD0YeYj2IZKBzJyZ2-rWHK3g/s320/Wayang+Kulit.jpg" id="homeLogo">Deviation</a>

Make sure the element you use is a block element, or styled to be block.

The CSS

The original element should be styled to size (width and height) with the background image that we'll use as the exploding image:

<style type="text/css">
a#homeLogo { 
width:300px; 
height:233px; 
text-indent:-3000px; 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEq9nXzarHNF_fwrxYIeIiDXTl5tHnzKotenAzrQ5qMTjRWeoPKP-gXmzu-nL5GCfgIBGB4EOQ8XPLfuFvbyjGG4KmL343qTyB7z8bOnSrOHgw5_L1m61QzD0YeYj2IZKBzJyZ2-rWHK3g/s200/Wayang+Kulit.jpg) 0 0 no-repeat; 
display:block; 
z-index:2; 
}
a#homeLogo span { 
float:left;
display:block;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEq9nXzarHNF_fwrxYIeIiDXTl5tHnzKotenAzrQ5qMTjRWeoPKP-gXmzu-nL5GCfgIBGB4EOQ8XPLfuFvbyjGG4KmL343qTyB7z8bOnSrOHgw5_L1m61QzD0YeYj2IZKBzJyZ2-rWHK3g/s200/Wayang+Kulit.jpg); 
background-repeat:no-repeat;
}
.clear { clear:both; }
</style>

Remember to set the text-indent setting so that the link text will not display.  The explosion shards will be JavaScript-generated SPAN elements which are displayed as in block format.  Note that the SPAN has the same background image as the A element -- we'll simply modify the background position of the element to act as the piece of the logo that each SPAN represents.

The jQuery JavaScript

Ryan also wrote the CSS animation code in jQuery so you can easily create a comparable effect with jQuery!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://compbenefit.co.cc/wp-content/uploads/cssanimation/CSSAnimation.js"></script>
<script src="http://compbenefit.co.cc/wp-content/uploads/cssanimation/CSSAnimation.jQuery.js"></script>

<script>
Number.random = function(min, max){
return Math.floor(Math.random() * (max - min + 1) + min);
};

var zeros = {x:0, y:0, z:0};

jQuery.extend(jQuery.fn, {

scatter: function(){
return this.translate({
x: Number.random(-1000, 1000),
y: Number.random(-1000, 1000),
z: Number.random(-500, 500)
}).rotate({
x: Number.random(-720, 720),
y: Number.random(-720, 720),
z: Number.random(-720, 720)
});
},

unscatter: function(){ 
return this.translate(zeros).rotate(zeros);
},

frighten: function(d){
var self = this;
this.setTransition('timing-function', 'ease-out').scatter();
setTimeout(function(){
self.setTransition('timing-function', 'ease-in-out').unscatter();
}, 500);
return this;
},

zoom: function(delay){
var self = this;
this.scale(0.01);
setTimeout(function(){
self.setTransition({
property: 'transform',
duration: '250ms',
'timing-function': 'ease-out'
}).scale(1.2);
setTimeout(function(){
self.setTransition('duration', '100ms').scale(1);
}, 250)
}, delay);
return this;
},

makeSlider: function(){
return this.each(function(){
var $this = $(this),
open = false,
next = $this.next(),
height = next.attr('scrollHeight'),
transition = {
property: 'height',
duration: '500ms',
transition: 'ease-out'
};
next.setTransition(transition);
$this.bind('click', function(){
next.css('height', open ? 0 : height);
open = !open;
});
})
},

fromChaos: (function(){
var delay = 0;
return function(){
return this.each(function(){
var element = $(this);
//element.scatter();
setTimeout(function(){
element.setTransition({
property: 'transform',
duration: '500ms',
'timing-function': 'ease-out'
});
setTimeout(function(){
element.unscatter();
element.bind({
mouseenter: jQuery.proxy(element.frighten, element),
touchstart: jQuery.proxy(element.frighten, element)
});
}, delay += 100);
}, 1000);
})
}
}())

});


// When the DOM is ready...
$(document).ready(function() {

// Get the proper CSS prefix
var cssPrefix = false;
if(jQuery.browser.webkit) {
cssPrefix = "webkit";
}
else if(jQuery.browser.mozilla) {
cssPrefix = "moz";
}

// If we support this browser
if(cssPrefix) {
// 300 x 233
var cols = 10; // Desired columns
var rows = 8; // Desired rows
var totalWidth = 300; // Logo width
var totalHeight = 233; // Logo height
var singleWidth = Math.ceil(totalWidth / cols); // Shard width
var singleHeight = Math.ceil(totalHeight / rows); // Shard height

// Remove the text and background image from the logo
var logo = jQuery("#homeLogo").css("backgroundImage","none").html("");

// For every desired row
for(x = 0; x < rows; x++) {
var last;
//For every desired column
for(y = 0; y < cols; y++) {
// Create a SPAN element with the proper CSS settings
// Width, height, browser-specific CSS
last = jQuery("<span />").attr("style","width:" + (singleWidth) + "px;height:" + (singleHeight) + "px;background-position:-" + (singleHeight * y) + "px -" + (singleWidth * x) + "px;-" + cssPrefix + "-transition-property: -" + cssPrefix + "-transform; -" + cssPrefix + "-transition-duration: 200ms; -" + cssPrefix + "-transition-timing-function: ease-out; -" + cssPrefix + "-transform: translateX(0%) translateY(0%) translateZ(0px) rotateX(0deg) rotateY(0deg) rotate(0deg);");
// Insert into DOM
logo.append(last);
}
// Create a DIV clear for row
last.append(jQuery("<div />").addClass("clear"));
}

// Chaos!
jQuery("#homeLogo span").fromChaos();
}
});
</script>

and you are done

source article : davidwalsh.name/css-explode

READ MORE - Exploding Logo with CSS3 and jQuery

Fading and Spinning Icons with CSS3 and jQuery

The post detailed how you could leverage CSS3's transformations and opacity properties, as well as the magical MooTools JavaScript framework, to create spinning, fading, animated icons. Due to popular request, I've duplicated the effect with another popular JavaScript toolkit: jQuery.

The HTML

<div style="padding:20px 0;position:relative;">
<div id="followIcons">
<a style="top: 0.653561px; left: 132.318px; z-index: 1022; opacity: 0.6; -moz-transform: rotate(36.7188deg);" href="http://feeds.feedburner.com/TemplateForYourBlog" rel="nofollow" id="iconRSS">RSS Feed</a>
<a style="top: 38.5985px; left: 200.085px; z-index: 1023; opacity: 0.6; -moz-transform: rotate(74.7156deg);" href="http://twitter.com/bambangwi" rel="nofollow" id="iconTwitter">@Bambang Wicaksono Twitter</a>
<a style="top: 2.87457px; left: 131.284px; z-index: 1012; opacity: 0.6; -moz-transform: rotate(191.92deg);" href="http://www.stumbleupon.com/bambangwi" rel="nofollow" id="iconstumbleupon">@Bambang Wicaksono Stumbleupon</a>
<a style="top: 29.391px; left: 245.218px; z-index: 1000; opacity: 0.6; -moz-transform: rotate(295.304deg);" href="http://www.delicious.com/bambang_wicaksono" rel="nofollow" id="iconDelicious">Bambang Wicaksono de.licio.us</a>
<a style="top: 33.1283px; left: 248.676px; z-index: 1024; opacity: 0.6; -moz-transform: rotate(78.0497deg);" href="http://facebook.com/masbambangwicaksono" rel="nofollow" id="iconFacebook">Bambang Wicaksono Facebook</a>
<a style="top: 15.11px; left: 93.4135px; z-index: 1017; opacity: 0.6; -moz-transform: rotate(346.566deg);" href="http://www.reddit.com/bambangwi" rel="nofollow" id="iconreddit">Bambang Wicaksono Reddit</a>
<a style="top: 28.4499px; left: 47.2333px; z-index: 1020; opacity: 0.6; -moz-transform: rotate(65.6721deg);" href="http://www.digg.com/users/bambangwi" id="icondigg">Bambang Wicaksono Digg</a>
<a style="top: 13.7949px; left: 36.0966px; z-index: 1021; opacity: 0.6; -moz-transform: rotate(210.147deg);" href="mailto:bambang_wicaksono@yahoo.com" id="iconMail">Bambang Wicaksono Email</a>
<a style="top: 24.9191px; left: 393.534px; z-index: 1019; opacity: 0.6; -moz-transform: rotate(264.417deg);" href="http://www.google.com/reader/view/feed/http%3A%2F%2Ffeeds.feedburner.com%2FTemplateForYourBlog" rel="nofollow" id="iconfavorite">Bambang Wicaksono Feed</a>
</div>
<div class="clear"></div>
</div>

The links are as standard as they come. These will be turned into dynamic icons.

The CSS

The first part of the process is using standard CSS to move the text off screen and instead use the icons as background images for the link:

<style type="text/css">
#followIcons a {
display:inline-block;
width:48px;
height:48px;
text-indent:-3000px;
background-position:0 0;
background-repeat:no-repeat;
z-index:2000;
overflow:hidden;
position:absolute;
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}
#iconRSS{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV43AiXCgHPUron1dIfNtAykaEw8u7ScuMisja2xgg3k7Mb4irq4SRbSlO1nHAMph-9YGcP_pMdsvT1Pikr7mFMViS_68RjgEaKEPSwfPtok6_nadjzNqBg5QUYylbLtT-zPPL9OU51oyw/s1600/rss.png); }
#iconTwitter{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUNCVL4AAj3SBKLbqMyPCT_anqChq0160KyZoJIJMB0ysl6zZO9QpdnCUOhk8NpPwLCpBKLu-zwnA3rbVMI3z2pEmjDZR-jxL2wgFVSUzyscc88-mWxrTRx_I8ecbqzvcG4ve6mB9XtRtW/s1600/twitter_bird.png); }
#iconstumbleupon{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt31ieYZ2aRCzP3CeNXOLefCBVSTWGrbXd78UmXT75k2ZkYCpuYHa-Dr2YcX7fRGsfQnAhVgQMlf1nZewhXiGGS74pxUTCxanwx-YrqgiU_-KwqT_YcukPzbYH1Dp4xQ1Zn1D4qMAoBVnx/s1600/stumbleupon.png); }
#iconDelicious{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjViR57ah8ntkNdeq9jSC3yZaC82Mm50pkV9diain0ajyHqyK7cw85cjtQeZ97YSm1eN7cioS2zMCIBaVgouuYR9liPigqc9wCBQYdaAxkO6_6dgHuMCNde9tr5dpYGyZIPvgZ3ayed9akm/s1600/delicious.png); }
#iconFacebook{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYcL1zleDqzotmcriOZhyphenhyphentJnORVKtKPfuaAfR1Rfe5QLmce9aL50Y4JBli8Fw_fkVkphg_i2UR2PQQzIJWVsArxArDL1JuWB7QIeSFEGRO3ioW1qc8KpUwB1rbW_RcPy2Hsj2bEzzUd0ev/s1600/facebook.png); }
#iconreddit{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSEvbMDUWZ7kIi-yjCaua6m3Zn_ptuKGYQ4ETuM9wlu-8fHjy_GKMvNblMdr8nPqNPCfN6qw-C2oYYedXV6aacwh7poZred9jOV1YXfVwTVRjiUsTuE3pmyHmEQd5uQkVp4R_vz9lIvDRU/s1600/reddit.png); }
#icondigg{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9fx2m2nrj4mo5AUYZwqLqbr0LSAfbGjUCXGN6QeOMebdMrX2XdpFe3mGjKAhrDo8-IP9Vd0lEmslvUVKJwVVHkcAXLM7WPs9aKK-z2KKyF9KYB1HBudCr9FDF08u0wc617gfG6vMJIFhY/s1600/digg.png); }
#iconMail{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAypSJVxjgzBkJnock9oEKW8dw16uuU6xcDdS3o_4ETbWCFkL9Fc8Xlo7jdCF5Do5YmQ6M8Aog7lfWC6iP7B63fYgEMGIMXNxTqaZtyWM7r_2fO8BdVLn5mzwjNuqZGT7OVuK_HBmHq8Mz/s1600/mail.png); }
#iconfavorite{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGzvXdUExYtIcu7VuzLAjGdUKHt3IzYaNGwWEYWdmv0EKW-45d_9aCQtLklgdDdHQ7e29j65bBg8F5qCBJijqnYcPsDA2keOnGqD0k6ottMdkNXM0HNFJbCGO08MhzvIUS6MHUrKAGW-Mf/s1600/favorite.png); }
</style>

The transition duration will be 0.8 seconds and transition property will be a basic transform. You can change the transform duration to any duration you'd like. Too fast or too slow will ruin the effect.

The jQuery JavaScript

The first part is randomly positioning each node/icon within the container. It's important to know the container's width and height, then subtract the icon width and height from that to know the true area you can fit the icon into. Nothing would be more lame than a piece of the icon hidden. The next step of the process is adding mouseenter and mouseleave events to make the images rotate and fade in during each respective event.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script>
jQuery(document).ready(function() {

// "Globals" - Will make things compress mo-betta
var $random = function(x) { return Math.random() * x; };

// Get the proper CSS prefix
if(jQuery.browser.webkit) {
cssPrefix = "webkit";
}
else if(jQuery.browser.mozilla) {
cssPrefix = "moz";
}
else if(jQuery.browser.opera) {
cssPrefix = "o";
}

// Apply opacity
var zIndex = 1000;

// Randomize each link
jQuery.each(jQuery("#followIcons a"),function(index) {
var startDeg = $random(360);
var element = jQuery(this);
var resetPlace = function() {
element.fadeTo(250,0.6).css("-" + cssPrefix + "-transform","rotate(" + startDeg + "deg)");
};
element.attr("style","top:" + $random(availableHeight) + "px; left:" + $random(availableWidth) + "px; z-index:" + zIndex).hover(function() {
element.fadeTo(250,1).css("zIndex",++zIndex).css("-" + cssPrefix + "-transform","rotate(0deg)");
},resetPlace);
resetPlace();
});

});

</script>

When the mouseenter event occurs, the rotation is animated to 0, no rotation. When the mouse leaves the element, the element animates to its initial random rotation. You'll also note that I've used opacity to add to the subtle effect.

source article : davidwalsh.name/fade-spin-css3-jquery 

READ MORE - Fading and Spinning Icons with CSS3 and jQuery

Create a Spinning Effect with CSS3

They're smooth, less taxing than JavaScript, and are the future of node animation within browsers. Dojo's mobile solution, dojox.mobile, uses CSS animations instead of JavaScript to lighten the application's JavaScript footprint.  One of my favorite effects is the spinning, zooming CSS animation.

The CSS

The first task is creating the base animation with @-webkit-keyframes:

<style type="text/css">
@-webkit-keyframes rotater {
0% { -webkit-transform:rotate(0) scale(1) }
50% { -webkit-transform:rotate(360deg) scale(2) }
100% { -webkit-transform:rotate(720deg) scale(1) }
}
</style>

The -webkit-transform property is the animator in this animation.  Define that at 0% the element is at 0 rotation and scaled to 1 -- that is the original state of the element.  At 50% of the animation, the element should be rotated 360 degress (a complete spin), and the element should grow twice in size.  At 100%, the element should return to its original scale and rotate to 720 degrees, thus looking the same as it started.

With our named animation created, it's time to apply the animation to an element upon its hover state:

<style type="text/css">
a.advert { width:125px; height:125px; display:block; text-indent:-3000px; }
a.advert:hover { 
-webkit-animation-name:rotater; 
-webkit-animation-duration:500ms; 
-webkit-animation-iteration-count:1; 
-webkit-animation-timing-function: ease-out;
-moz-transform:rotate(360deg) scale(1);
-moz-transition-duration:500ms;
-moz-transition-timing-function: ease-out;
}
</style>

The event is assigned using the -webkit-animation-name property. Additional properties are assigned:  -webkit-animation-duration makes the animation last 500 milliseconds, -webkit-animation-iteration-count directs the animation to occur only once, and -webkit-animation-timing-function sets the easing transition to ease-out.

Highly recommend using this effect with fixed-size DOM nodes, with background images.  Using this effect with simple DOM nodes doesn't look great.

READ MORE - Create a Spinning Effect with CSS3