jQuery World: CSS3

Fading and Spinning Icons with CSS3 and jQuery

Wednesday, April 20, 2011 Posted by Unknown

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/AVvXsEi-KJtyRfscm6BKWKgvYsALanYeLbStHB3kvF65wink_JRq-90Z1PxlrpdpoTIEczcLJktN0i-n6FpuntadkekmB5aBhmK8BvvgsGMXfO_DMIta6nvV7pSfRUJsBmeu9-PTvGQL5txaxtq_/s1600/rss.png); }
#iconTwitter{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr2LepL1A6TN1N-5xjQSXqXW5-rYPU10RxZmHBR2CFCvuDsxcOW4iemzVoYgOhkQ1qVM6JHE-OiWQdq5Pd4FT_pGuF-UwMnG3s5iXWlrdKpzipPfnORcpb8hos15x_vjHwL-yyem_OtRpU/s1600/twitter_bird.png); }
#iconstumbleupon{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7owk_NkO0Oe-HyiSqpaOB_10mdEtP6WmqhtmfslTpCrDFtogefpA-IJCXP9oTZ1nafDSplZZUEkfIz8Yv9xDmJrcoRMcbMW1YkSFPORnYljGbjLQhmPGEEUPjowwBAM1jAhT6N3kf3oui/s1600/stumbleupon.png); }
#iconDelicious{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIxMXZebFRg4d4i-w6a227prWzXobZj_BzKuHyWu9MO1ccTGv438ymb-o6bYdkm_3smqlQ1Y5kp8hLAPAu6bJDgQeLJG7ZLaSGAfi7aqQtop7_7EQoPnDn-69GExTqtRyCZKXtdd1SOy2v/s1600/delicious.png); }
#iconFacebook{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMngMnXlbvxY-nYFWUvIRJbVzaI18K3h10eGtsKTo6fkyVltNxeMSjVGCX_NkMi1aTuaHtxa5kDfuPMAdhkFrbODTqzCkEz6_hn49KuutKyk7q1GsLqrALaSpwLR5d0onUqJnk6_AvjCTb/s1600/facebook.png); }
#iconreddit{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO63v5IVnhyphenhyphenIXdggESFldsINq4AjyvnmD0s2gV52C6vPGUjwZc6MOKmPRTSH4lopWebTYtKGUqphQIT0KX_nh-r-9P-9wDXdimfTC_hymCjve77xu4EPCylH6zdh4iDHt9tU7iq9OZqw7c/s1600/reddit.png); }
#icondigg{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnvEIs2Ihyphenhypheng8J5byglGyZ8-VbgIvQT_5f9ofkogXEhc7LGUWhI5iFvABGUyj8xZUMXm7emN_S2CTTVvPOhl8Us_OTY_tnBEz18130TwTEVat0rBOcEAXO_rkNJARk7RfYC5uL9KNupsDQD/s1600/digg.png); }
#iconMail{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4HaWKzsEr5OCeknuHtmT9YdB87SfxAzceg4IDQojh5n4o5N9SneS55jyqwBsBU46QVJhrQafxRU3ckIViB1GA6XLWjpZoCT2L0eZ85bf10ZvLdsqyMTbrUZUcKYiArbfBAG_gwl7P0rn8/s1600/mail.png); }
#iconfavorite{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitDiKESJFbDppDAGH4O3xGUWZnqivuAOrailEQH_Be9ogaQsyutkiKWdf0FcipaO4MyKLcAsrzVw9pgOm-8NLvdGy7VgZ7t3oXsu0ve3-53aAWqZHzLQBiCaW9NaAReFNKHZ1_7WWbblzZ/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.5.2/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

Read More Add your Comment 0 comments

Exploding Logo with CSS3 and jQuery

Tuesday, April 05, 2011 Posted by Unknown

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/AVvXsEhyJF8_HvqT5tDnoXoxYASpnTyJVw0VRB-0101zOF-cVVKHCk4bqIDMn1zZZsc720408lrX5xx2aN0D7B9nyW2IHMI_AqvlQJinffojMWOouWOxQd1bFXGTau0byY3SIJ3rYrneeWw4A3eY/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/AVvXsEhyJF8_HvqT5tDnoXoxYASpnTyJVw0VRB-0101zOF-cVVKHCk4bqIDMn1zZZsc720408lrX5xx2aN0D7B9nyW2IHMI_AqvlQJinffojMWOouWOxQd1bFXGTau0byY3SIJ3rYrneeWw4A3eY/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/AVvXsEhyJF8_HvqT5tDnoXoxYASpnTyJVw0VRB-0101zOF-cVVKHCk4bqIDMn1zZZsc720408lrX5xx2aN0D7B9nyW2IHMI_AqvlQJinffojMWOouWOxQd1bFXGTau0byY3SIJ3rYrneeWw4A3eY/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 Add your Comment 0 comments

Create a Spinning Effect with CSS3

Tuesday, April 05, 2011 Posted by Unknown

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:


@-webkit-keyframes rotater {
0% { -webkit-transform:rotate(0) scale(1) }
50% { -webkit-transform:rotate(360deg) scale(2) }
100% { -webkit-transform:rotate(720deg) scale(1) }
}

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:


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(720eg) scale(2); 
  -moz-transition-duration:500ms; 
  -moz-transition-timing-function: ease-out;
}

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.

source article: David Walsh

Read More Add your Comment 0 comments