Template For Your Blog | Blogger Templates

This functionality will come in the form of an easy to use jQuery plugin that you can easily incorporate into any website which displays a set of featured photos with a camera shutter effect.

jquery.shutter.css


<style>
#container{
 width:640px;
 height:400px;
 margin:0 auto;
 border:5px solid #fff;
 overflow:hidden;
 -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

#container ul{
 list-style:none;
padding:0;
margin:0;
}
#page{
 width:650px;
height:400px;
}
#container img{
padding:0;
}
.shutterAnimationHolder .film canvas{
 display: block;
    margin: 0 auto;
}

.shutterAnimationHolder .film{
 position:absolute;
 left:50%;
 top:0;
}

.shutterAnimationHolder{
 position:absolute;
 overflow:hidden;
 top:0;
 left:0;
 z-index:1000;
}
</style>

jQuery


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

<script src=".../jquery.shutter.js"></script>

<script type="text/javascript">
$(document).ready(function(){

 var container = $('#container'),
  li = container.find('li');

 // Using the tzShutter plugin. We are giving the path
 // to he shutter.png image in the plugin folder and two
 // callback functions.

 container.tzShutter({
  imgSrc: 'assets/jquery.shutter/shutter.png',
  closeCallback: function(){

   // Cycling the visibility of the li items to
   // create a simple slideshow.

   li.filter(':visible:first').hide();
   
   if(li.filter(':visible').length == 0){
    li.show();
   }
   
   // Scheduling a shutter open in 0.1 seconds:
   setTimeout(function(){container.trigger('shutterOpen')},100);
  },
  loadCompleteCallback:function(){
   setInterval(function(){
    container.trigger('shutterClose');
   },4000);
   
   container.trigger('shutterClose');
  }
 });
 
});
    </script>

Generated HTML


<div id="page">

 <h1>Shutter Folio Photography</h1>

 <div id="container">
     <ul>
            <li><img src=".../img/1.jpg" width="640" height="400" /></li>
            <li><img src=".../img/2.jpg" width="640" height="400" /></li>
            <li><img src=".../img/3.jpg" width="640" height="400" /></li>
            <li><img src=".../img/4.jpg" width="640" height="400" /></li>
        </ul>
    </div>

</div>

The Final Code


<head>
<style>
#container{
 width:640px;
 height:400px;
 margin:0 auto;
 border:5px solid #fff;
 overflow:hidden;
 -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

#container ul{
 list-style:none;
padding:0;
margin:0;
}
#page{
 width:650px;
height:400px;
}
#container img{
padding:0;
}
.shutterAnimationHolder .film canvas{
 display: block;
    margin: 0 auto;
}

.shutterAnimationHolder .film{
 position:absolute;
 left:50%;
 top:0;
}

.shutterAnimationHolder{
 position:absolute;
 overflow:hidden;
 top:0;
 left:0;
 z-index:1000;
}
</style>
</head>

<body>
<div id="page">

 <h1>Shutter Folio Photography</h1>

 <div id="container">
     <ul>
            <li><img src=".../img/1.jpg" width="640" height="400" /></li>
            <li><img src=".../img/2.jpg" width="640" height="400" /></li>
            <li><img src=".../img/3.jpg" width="640" height="400" /></li>
            <li><img src=".../img/4.jpg" width="640" height="400" /></li>
        </ul>
    </div>

</div>

<script type='text/javascript'>
//<![CDATA[
(function(){
 
 // Creating a regular jQuery plugin:
 
 $.fn.tzShutter = function(options){
  
  // Checking for canvas support. Works in all modern browsers:
  var supportsCanvas = 'getContext' in document.createElement('canvas');

  // Providing default values:

  options = $.extend({
   openCallback:function(){},
   closeCallback:function(){},
   loadCompleteCallback:function(){},
   hideWhenOpened:true,
   imgSrc: 'http://dl.dropbox.com/u/13256471/jquery.shutter/assets/jquery.shutter/shutter.png'
  },options);
  
  var element = this;
 
  if(!supportsCanvas){
   
   // If there is no support for canvas, bind the
   // callack functions straight away and exit:
   
   element.bind('shutterOpen',options.openCallback)
       .bind('shutterClose',options.closeCallback);
   
   options.loadCompleteCallback();

   return element;
  }
  
  window.setTimeout(function(){
 
   var frames = {num:15, height:1000, width:1000},
    slices = {num:8, width: 416, height:500, startDeg:30},
    animation = {
     width : element.width(),
     height : element.height(),
     offsetTop: (frames.height-element.height())/2
    },
    
    // This will calculate the rotate difference between the
    // slices of the shutter. (2*Math.PI equals 360 degrees in radians):
    
    rotateStep = 2*Math.PI/slices.num, 
    rotateDeg = 30;

   // Calculating the offset   
   slices.angleStep = ((90 - slices.startDeg)/frames.num)*Math.PI/180;
   
   // The shutter slice image:
   var img = new Image();
  
   // Defining the callback before setting the source of the image:
   img.onload = function(){

    window.console && console.time && console.time("Generating Frames");
    
    // The film div holds 15 canvas elements (or frames).
    
    var film = $('<div>',{
     className: 'film',
     css:{
      height: frames.num*frames.height,
      width: frames.width,
      marginLeft: -frames.width/2, // Centering horizontally
      top: -animation.offsetTop
     }
    });

    // The animation holder hides the film with overflow:hidden,
    // exposing only one frame at a time.
    
    var animationHolder = $('<div>',{
     className: 'shutterAnimationHolder',
     css:{
      width:animation.width,
      height:animation.height
     }
    });
    
    for(var z=0;z<frames.num;z++){
 
     // Creating 15 canvas elements.
 
     var canvas = document.createElement('canvas'),
      c  = canvas.getContext("2d");
 
     canvas.width=frames.width;
     canvas.height=frames.height;
 
     c.translate(frames.width/2,frames.height/2);
 
     for(var i=0;i<slices.num;i++){
      
      // For each canvas, generate the different
      // states of the shutter by drawing the shutter
      // slices with a different rotation difference.
      
      // Rotating the canvas with the step, so we can
      // paint the different slices of the shutter.
      c.rotate(-rotateStep);
      
      // Saving the current rotation settings, so we can easily revert
      // back to them after applying an additional rotation to the slice.
      
      c.save();
      
      // Moving the origin point (around which we are rotating
      // the canvas) to the bottom-center of the shutter slice.
      c.translate(0,frames.height/2);
      
      // This rotation determines how widely the shutter is opened.
      c.rotate((frames.num-1-z)*slices.angleStep);
      
      // An additional offset, applied to the last five frames,
      // so we get a smoother animation:
      
      var offset = 0;
      if((frames.num-1-z) <5){
       offset = (frames.num-1-z)*5;
      }
      
      // Drawing the shutter image
      c.drawImage(img,-slices.width/2,-(frames.height/2 + offset));
      
      // Reverting back to the saved settings above.
      c.restore();
     }
     
     // Adding the canvas (or frame) to the film div.
     film.append(canvas);
    }
    
    // Appending the film to the animation holder.
    animationHolder.append(film);
    
    if(options.hideWhenOpened){
     animationHolder.hide();
    }
    
    element.css('position','relative').append(animationHolder);
    
    var animating = false;
    
    // Binding custom open and close events, which trigger
    // the shutter animations.
    
    element.bind('shutterClose',function(){
     
     if(animating) return false;
     animating = true;
     
     var count = 0;
     
     var close = function(){
      
      (function animate(){
       if(count>=frames.num){
        animating=false;
        
        // Calling the user provided callback.
        options.closeCallback.call(element);
        
        return false;
       }
       
       film.css('top',-frames.height*count - animation.offsetTop);
       count++;
       setTimeout(animate,20);
      })();
     }
     
     if(options.hideWhenOpened){
      animationHolder.fadeIn(60,close);
     }
     else close();
    });
    
    element.bind('shutterOpen',function(){
     
     if(animating) return false;
     animating = true;
     
     var count = frames.num-1;
     
     (function animate(){
      if(count<0){
       
       var hide = function(){
        animating=false;
        // Calling the user supplied callback:
        options.openCallback.call(element);
       };
       
       if(options.hideWhenOpened){
        animationHolder.fadeOut(60,hide);
       }
       else{
        hide();
       }
       
       return false;
      }
      
      film.css('top',-frames.height*count - animation.offsetTop);
      count--;
      
      setTimeout(animate,20);
     })();
    });

    // Writing the timing information if the
    // firebug/web development console is opened:
    
    window.console && console.timeEnd && console.timeEnd("Generating Frames");
    options.loadCompleteCallback();
   };
   
   img.src = options.imgSrc;
   
  },0);
  
  return element;  
 };
 
})(jQuery);
//]]>
</script>

</body>

With this Shutter Effect is complete!

source article : http://tutorialzine.com/2011/03/photography-portfolio-shutter-effect/

Shutter Effect with jQuery

Ryan Florence's Animation Library

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/AVvXsEhNmxihILz4bjeM8fzLSnKW2WDVMNx_mESveJMMmNkNjLg9smo2AkW1Z2iQhrRlqFTMJECaNSqh6CPM6bEkGtfvgcOgOuUzz7JEafs8KaLOnm5GiS6riMEMLyuhJ0e11EJo78j9s80WzuQB/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/AVvXsEhNmxihILz4bjeM8fzLSnKW2WDVMNx_mESveJMMmNkNjLg9smo2AkW1Z2iQhrRlqFTMJECaNSqh6CPM6bEkGtfvgcOgOuUzz7JEafs8KaLOnm5GiS6riMEMLyuhJ0e11EJo78j9s80WzuQB/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/AVvXsEhNmxihILz4bjeM8fzLSnKW2WDVMNx_mESveJMMmNkNjLg9smo2AkW1Z2iQhrRlqFTMJECaNSqh6CPM6bEkGtfvgcOgOuUzz7JEafs8KaLOnm5GiS6riMEMLyuhJ0e11EJo78j9s80WzuQB/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

Exploding Logo 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>

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

Fading and Spinning Icons with CSS3 and jQuery

3D Gallery View

3D Gallery View is an image gallery based on jQuery. This one permits to animate a series of images in the space using a really short code. With a characteristic 3D effect this plugin makes a nice system to share your shots.

Top Menu

jquery.shutter.css

jQuery

Generated HTML

The Final Code

1. Animated Menus Using jQuery

2. jQuery drop down menu

3. Kwicks for jQuery-7 Menus

4. CSS Dock Menu

5. Sliding JavaScript Menu Highlight 1kb

6. Animated Menus Using jQuery

7. jQuery Fading Menu

8. Superfish jQuery menu

9. Smooth Animated Menu with jQuery

10. CSS Sprites2 Menu - It’s JavaScript Time

11. Apple style menu and improve it via jQuery

12. jqDock menu

13. Multilevel Dropdown menu with CSS and improve it via jQuery

14. jQuery feed menus

15. Menumatic horizontal menu

16. Garage Door effect menu

17. jQuery Background Position menu

Blog Archive

Popular Posts

Recent Posts

Recent Comments

Site Info

Site Info

Subscribes

Be My Friend