Google Plus Style Animations with Jquery and CSS3
Wall Script
Wall Script
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;
}
web notification

50 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. simple example, google plus add friends circle animation, http://jgaibory.webuda.com/static/test/gplus-circle

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

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

    ReplyDelete
  23. Excelente...muchas gracias!!

    ReplyDelete
  24. 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
  25. cool. but you need to get it working on all browsers. IE is not dead for regular users

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

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

    By this url u can get that js..

    ReplyDelete
  28. Wow!! awesome.. really helpful!

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

    ReplyDelete
  30. 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
  31. Nice beginners learning guide for css and jquery!appreciate your work!

    ReplyDelete
  32. Nice tips. Thanks for sharing such a nice post.

    ReplyDelete

mailxengine Youtueb channel
Make in India