Posts Tagged animation tutorial
Coming Soon - Premium WordPress Theme Giveaway To All Our Email Subscribers
Google Plus like Deleting a Circle Animation – Tutorial, Demo and Free Download
Posted by Praveen Gowda I V in Google Plus, Jquery, Others, Tutorials, Web Design on August 22, 2011
A few weeks back I has published a post “Creating Circle Effects as in Google Plus – Tutorial and Demo“. After publishing the topic I have received a lot of requests on publishing a tutorial on how to create the animation when a circle is deleted.
So here is the tutorial.If you are still not a member of Google Plus and wondering what really happens when you delete a circle, then here you go:
Whenever you delete a circle it first jerks down and rolls away gradually disappearing on reaching the end of browser screen
Cool effect isn’t it ?
I thought it will be a very nice effect to implement in any website for varied purposes.In the tutorial I have created when you hover your mouse across the circle it enlarges and if you want to delete the circle then right-click on the circle’s name(Eg: Friends or acquaintances) , a context menu with the delete option opens similarly to that found in Google+. Clicking on the delete option will delete the circle with exact animation we find in Google+.
jerks down and rolls away gradually disappearing on reaching the end of browser screen
So below is the link to Live Demo and Code Download, If you are interested in knowing how the code works you can continue reading the rest of this post.
 Download |
 Live Demo |
The Source code consists of the following files
HTML
Source code of index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Google Plus like Circle Animation | http://blog.geotitles.com</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles/style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jqcontextmenu.js"></script>
<script type="text/javascript" src="js/circle.js"></script>
</head>
<body>
<!--HTML for Context Menu to display delete circle option on right click-->
<ul id="contextmenu" class="jqcontextmenu">
<li>
<a class="circle_del" href="#">Delete Circle</a>
</li>
</ul>
<!--HTML for Context Menu to display delete circle option on right click ENDS here-->
<h3>This is a live demo of <a href="http://blog.geotitles.com/2011/08/google-plus-like-deleting-a-circle-animation-tutorial-demo-and-free-download">Google Plus like Circle animation</a> Tutorial at <a href="http://blog.geotitles.com">Geo Web Station</a>, Click <a href="http://blog.geotitles.com/2011/08/google-plus-like-deleting-a-circle-animation-tutorial-demo-and-free-download">here</a> to go to the <a href="http://blog.geotitles.com/2011/08/google-plus-like-deleting-a-circle-animation-tutorial-demo-and-free-download">tutorial page</a> to download source code</h3>
<div id="circle">
<div class="outer_circle">
<div class="inner_circle">
<div class="circle_label">
<p><a style="color:#FFF; text-decoration:none;" class="mylinks" href="#">Friends</a></p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
Source code of style.css
CSS for creating the circle animation
body{ text-align: center;margin:0; padding:0; color:#000; font-family: "Times, serif", "Helvetica" , "Arial";font-size:12px;background: #FFF; }
h1{padding:30px;color:#000;}
#circle{ position: relative;vertical-align: top;position: relative;display: -moz-inline-box; display: inline-block;line-height: normal;text-align:center}
.outer_circle
{
background: url('../images/circle_closed.png') no-repeat left top;
height: 125px;width: 125px; margin: 31px;position: relative;vertical-align: top;z-index: 5;
-webkit-border-radius: 63px;-moz-border-radius: 63px;border-radius: 63px;cursor: pointer;
}
.outer_circle_open
{
text-decoration:underline;
background:url('../images/circle_open.png') no-repeat left top !important;
height: 183px;width: 183px;
margin: 2px;z-index: 2; -webkit-border-radius: 92px;-moz-border-radius: 92px;border-radius: 92px;
}
.inner_circle{
display: block; color: white; cursor: pointer;font-size: 13px; position: relative; cursor: pointer; text-align: center;
vertical-align: center; width: 88px;left: 18px; top: 47px;line-height: normal;
}
.circle_label
{
font:Arial, Helvetica, sans-serif;color: white;cursor: pointer;font-size: 13px;cursor: pointer;text-align: center
}
.rotate_label {
-webkit-animation-name: rotateThis;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
}
@-webkit-keyframes rotateThis {
from {-webkit-transform:scale(1) rotate(0deg);}
to {-webkit-transform:scale(1) rotate(360deg);}
}
CSS for creating the context menu on right clicking on circle
.jqcontextmenu, .jqcontextmenu ul{ /*topmost and sub ULs, respectively*/
font: normal 13px Verdana;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: white;
border: 0px;
visibility: hidden;
display: none; /*collapse all sub menus to begin with*/
box-shadow: 3px 3px 8px #818181; /*shadow for CSS3 capable browsers.*/
-webkit-box-shadow: 3px 3px 8px #818181;
-moz-box-shadow: 3px 3px 8px #818181;
z-index:1000;
}
.jqcontextmenu li{
position: relative;
}
.jqcontextmenu li a{
display: block;
width: 100px; /*width of menu (not including side paddings)*/
color: black;
background: #F5F5F5;
text-decoration: none;
padding: 4px 5px;
}
* html .jqcontextmenu li{ /*IE6 CSS hack*/
display: inline-block;
width: 170px; /*width of menu (include side paddings of LI A*/
}
.jqcontextmenu li a:hover{
background: #e0e0e0;
}
.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
JavaScript
Source code of circle.js
JavaScript for google plus like circle animation
$(document).ready(function(){
$(function() {
$('.outer_circle').mouseover(function() {
$('.outer_circle').addClass('outer_circle_open');
$('.inner_circle').animate({left:'47px',top:'76px'},0);
});
$('.outer_circle').mouseout(function() {
$('.outer_circle').removeClass('outer_circle_open');
$('.inner_circle').animate({left:'18px',top:'47px'},0);
});
});
$(function() {
$('.jqcontextmenu').mouseover(function() {
$('.outer_circle').addClass('outer_circle_open');
$('.inner_circle').animate({left:'47px',top:'76px'},0);
});
});
$('.circle_del').click(function(){
$('.circle_del').remove();
$('.outer_circle').addClass('outer_circle_open').animate({height: '183px', width: '183px'},100);
$('.inner_circle').animate({left:'47',top:'76'},0)
$('.circle_label').addClass('rotate_label');
$('.outer_circle').animate({"top":"150px"},300).animate({"bottom":"20px"}, 100, function(){ });
$('.outer_circle').animate({"opacity":"0","margin-left":"600px"}, 800, 'linear');});
});
jQuery(document).ready(function($){
$('a.mylinks').addcontextmenu('contextmenu') //apply context menu to links with class="mylinks"
})
Other JavaScript files required are :
- jqcontextmenu.js
- jquery.min.js
That’s it for this week and next week we will be back one more unique tutorial, In the meanwhile you can stay updated with your blog by :
Subscribe to RSS feeds
Subscribe via email
Subscribe via SMSIf you have any problems using the downloaded files, then leave a comment below.
Want more improvisations on this script, or want to request a new tutorial, then please Contact me right-away.
I promise to respond to everyone who contacts asking for support or new tutorials.
Recent Comments