Google Plus Style Animations with Jquery and CSS3
Wall Script
Follow Me:
Monday, July 11, 2011

Google Plus Style Animations with Jquery and CSS3

Google plus given an awesome kick to user experience, specially circles UI animations. I feel it’s great and new definition to have user experience design. I have tried circle rotation animation effect with Jquery and CSS3. Just few lines of code applying CSS styles using jQuery methods like .addClass() and .animation(). Take a look at these live demos with modern brewers.

Special Animation Effects


For best result try with Chrome browser.

Live Demo 1     Live Demo 2     Live Demo 3

Javascript Code
$(".square").click(function(){})- square is the class name of DIV tag. Using $(this).animation() and $(this).addClass() - applying animation and class styles.
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="easing.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".square").click(function()
{
$(this).animate({width:'100px',height:'100px'}, 500, 'linear', function()
{
$(this).addClass('circle-label-rotate');
}).addClass('circle').html('<div class="innertext">Bye</div>').animate({"opacity":"0","margin-left":"510px"},1500);
$(this).slideUp({duration: 'slow',easing: 'easeOutBounce'}).hide();
});
});
</script>
//HTML Code blocks
<div class='square'> 1</div>
<div class='square'> 2</div>
<div class='square'> 3</div>

Circle
CSS3 circle diameter 50px
.circle
{
border-radius: 50px; // Chrome & IE9
-moz-border-radius: 50px; // Firefox
-webkit-border-radius: 50px; // Safari
height:100px;
width:100px;
background:#dedede;
}

Rotation
CSS3 rotating 0 - 360 degrees
@-webkit-keyframes rotateThis
{
from {-webkit-transform:scale(1) rotate(0deg);}
to {-webkit-transform:scale(1) rotate(360deg);}
}
.circle-label-rotate
{
-webkit-animation-name: rotateThis;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
}

Square
Contains CSS code.
.square
{
height:100px;
width:500px;
border:dashed 1px #000;
margin-top:10px;
}
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


51 comments:

  1. Firefox5 is supporting CSS3 Animations too, so you can add @-moz-keyframes ... with -moz- prefixes to your tutorial.

    ReplyDelete
  2. What a Great work guy :) i love it :)

    ReplyDelete
  3. gud one you can do in firefix too.....

    ReplyDelete
  4. Wow! this is amazing!

    ReplyDelete
  5. Can't wait til we can do this stuff across all browsers.

    ReplyDelete
  6. I do not like this effect, I think it has no content.

    But... is cool.

    ReplyDelete
  7. Demo 2 consistently crashes Chrome on OSX, I have not profiled it yet but it seems like there is a memory issue.

    ReplyDelete
  8. This is awesome. this is really cool in the eyes. realized that if the image dimension is larger than 80 by 80, the rolling effect gets out of hand and almost scramble the effect 4 me.

    How can i fix that ?

    ReplyDelete
  9. Thats nice to know.. good tut again..

    ReplyDelete
  10. wow!!! awasome!!! working perfect in Mozilla, Effects not working in IE-9.

    ReplyDelete
  11. very nice features to add to our app

    ReplyDelete
  12. nice post
    awesome...
    really cooool...

    ReplyDelete
  13. This is amazing.

    ReplyDelete
  14. Something very interesting, Google plus has emerged with the new phase of graphics in social media websites.

    Live demo helps to get quick overview of whole post and Your tutorial is very easy to use :)

    ReplyDelete
  15. This is amazing! Thanks a lot!!!

    ReplyDelete
  16. That's nice but where is php code ?

    And also, the delete function takes more time. It is not as nice as the one of facebook :)

    ReplyDelete
  17. i like it...... :)

    ReplyDelete
  18. Circle not roatating in FireFox. Can you fix it?.

    ReplyDelete
  19. I really love your tutorials. You are amazing!

    Now Adobe released ADOBE EDGE to do more animation with Jquery, HTML5 and CSS3. follow the URL http://labs.adobe.com/technologies/edge/

    I have posted in my blog
    www.tamiltuts.com

    ReplyDelete
  20. Promoting google+ votes is becoming a very hot business. Using these types of services could have negative or positive affects on SEO.
    We just have to see how google treats them. Another place to buy google plus votes is bulkones.com
    Will be interesting to see how this evolves over the next few months.

    ReplyDelete
  21. simple example, google plus add friends circle animation, http://jgaibory.webuda.com/static/test/gplus-circle

    ReplyDelete
  22. Nice article. It helps me very much in my project keep it up.Thanks

    ReplyDelete
  23. cool ...
    could you teach me ??

    ReplyDelete
  24. Excelente...muchas gracias!!

    ReplyDelete
  25. Great, its seems very nice. I hope i will see in daily blogging. I really appreciate your work. I am going to be a daily visit od 9lessons now. :P

    ReplyDelete
  26. cool. but you need to get it working on all browsers. IE is not dead for regular users

    ReplyDelete
  27. where i can get easing.min.js?

    ReplyDelete
  28. http://demos.9lessons.info/eas.js

    By this url u can get that js..

    ReplyDelete
  29. Wow!! awesome.. really helpful!

    ReplyDelete
  30. Srinivas, you deserve appreciation for this article.

    ReplyDelete
  31. A person necessarily lend a hand to make significantly posts I would state. That is the very first time I frequented your web page and to this point?

    ReplyDelete
  32. Nice beginners learning guide for css and jquery!appreciate your work!

    ReplyDelete
  33. Hey Great tips dude, really its a great offer to read such good content for free.

    ReplyDelete

Make in India