You're here » Home » widget » Fading and Spinning Icons with CSS3 and jQuery

Fading and Spinning Icons with CSS3 and jQuery

Diposkan oleh Unknown di Tuesday, April 05, 2011

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>

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/AVvXsEjcIWDYyUd5bchzQir6AiWmsxEZF2wUxYoMInCjomt_yvCCAwNxGuxVmr3cPmD2PDI0AXq2sQutJKwROLA2s_TnrsuM7-6UxBQgQ6bPMdLUhhuzDiSn-TBuKJSgwA2FBeLCljREw3TJGrit/s1600/rss.png); }
#iconTwitter{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT4FdX4e4Lxm0x4dCZNr7cWftdCN5vk9bMfnZOo-IiMFgow2vin683DcEzaJ0Rh00yO8c6AJ_kDrmc15HQORlcX-tBG1Md3YD0XsireJsFtR_ao7Riit9K5Vm1xWQsvP-2osQVdKXkqHqP/s1600/twitter_bird.png); }
#iconstumbleupon{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjClkFpEay54cugbv2GohHv423Ize-0C8L3ln6KNgqkCMq0_GgagSesykrNS6z_7Tlis_I65e9Xwy36d8yCO073_VME76h0ie2u310TbEIC-oA2WvL4bP98v3LnetVRT4YwJvVVL4Dl4doK/s1600/stumbleupon.png); }
#iconDelicious{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGmXNYX3YuAnjMIjNWtJ8E8kroL_FxMObeSePRKhQ8qb3S0lkxLW7HoWb9aPJiiViVx79vC5yUMnwucM1cj1REDW1DtzjCE_oNP1QIph6o3qqseA9xcml-r21ZhvNF-ce31RSQ5a-EKBpM/s1600/delicious.png); }
#iconFacebook{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9MSJSfFJcLvSyWu0tv9X6VuOGapoUXelYJiVKpnzjMS0oU0GaJZchOpalREecf9RBCOPJxl5Fp7qVhFv2SWx15wMWzmzTaHS8T6eY8nxCRXtTaorgLFw7p-Y9QjW6JE7EK5tVdV4qZxsu/s1600/facebook.png); }
#iconreddit{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiXElT3h0qsLFnrTScNgXi106oHPnG4OwlWuKq2sSvMpC_yoDS-AzraMEAPRx1HkwuIdXcMbyuP-DRejNtxGhdGJRyWclPqJbfXKLt0VLIcAP9mo7fPHm50ckJnPTmo_wPDfIxhEZvlkp1/s1600/reddit.png); }
#icondigg{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxQ5BRzEnZRd6Z-VLhNyUBc3VOy2qNT68MRVj85DlqIKPaxzmBqHjbBU0r5WZXlRnmbcpe1ZqG_mBA1oJHil-jbHkSujqlwLSNTtoaY8NZROD9DEkXAn5I_0x_LBC6tqjW8kT7koaWHMj8/s1600/digg.png); }
#iconMail{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw2TTnnxSm4s6tnMZAFETWcssEqbZOwBZoa3WYEBHROFGKT3NBpj2tPzGJsfXEzmnq3j4emKgs8tNgoenC8RQ4FKsfN7T0epTIkyN6_JoJywQoeIvh5gik41Od7KvZKEuT_S0WAxdUIXfn/s1600/mail.png); }
#iconfavorite{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifvyGHOTuDiDvSU8pYnU0dDq4eFWPbl1NZZTnK_uGxEPGCCMfdgPyTLOWBINy5HkzaCsPY_ugETCiOJzRR4eD2lUOyfCFCDMDegTIXDKwAyIcNcI8gTUtJPgDPDiIVbim3raUO3zAC7Ea8/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; };
 var availableWidth = 400, availableHeight = 40;
 
 // 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