Created Animated Sharing Bar With jQuery & CSS - This week we are using pure JavaScript with the help of the jQuery framework, to make an animated sharing bar, which will enable your website visitors to share your posts on a number of social networks.
The first thing you should do is create an HTML script that will display the results of the work you are doing. It could be your love with the name demo.html
<div id="share">
<div id="stage">
<div class="btn digg"><div class="bcontent"><a class="DiggThisButton"></a><script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script></div></div>
<div class="btn tweetmeme"><div class="bcontent"><script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script></div></div>
<div class="btn dzone"><div class="bcontent"><script language="javascript" src="http://widgets.dzone.com/links/widgets/zoneit.js"></script></div></div>
<div class="btn reddit"><div class="bcontent"><script type="text/javascript" src="http://www.reddit.com/button.js?t=2"></script></div></div>
<div class="btn facebook"><div class="bcontent"><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div></div>
</div>
<div id="share-label">
<!-- This is where the share some love image appears -->
</div>
</div>
Then the next step is to provide the display on your work. It required a css script that will give shape perfect display.
/* Individual rules for every share button */
.digg{ background:url(img/digg_reflection.png) no-repeat -4px bottom;}
.reddit{ background:url(img/reddit_reflection.png) no-repeat -4px bottom;}
.facebook{ background:url(img/facebook_reflection.png) no-repeat bottom center;}
.tweetmeme{ background:url(img/twit_reflection.png) no-repeat -5px bottom;}
.dzone{ background:url(img/dzone_reflection.png) no-repeat -7px bottom;}
.thanksto{
position:absolute;
bottom:2px;
right:4px;
font-size:10px;
}
.thanksto a,.thanksto a:visited{
color:#BBB;
}
/* Customizing the facebook share button */
span.fb_share_no_count {
display:block;
}
span.fb_share_count_top.fb_share_no_count {
line-height:54px;
}
span.fb_share_count_nub_top.fb_share_no_count{
display:none;
}
span.fb_share_no_count span.fb_share_count_inner {
background:#3B5998 url(http://static.fbshare.me/f_only.png) no-repeat scroll 20px 5px;
display:block;
}
#share{
/* The share box container */
width:500px;
background:#ececec;
height:220px;
margin:60px auto;
overflow:hidden;
-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px;
}
#share-label{
/* The image on the right */
background:url(img/share.png) no-repeat 50% 50%;
float:left;
height:220px;
width:200px;
}
#stage{
/* This is where the animation takes place */
position:relative;
border-right:1px solid #DDDDDD;
width:290px;
height:220px;
background:white;
float:left;
border-bottom-left-radius:12px;
border-top-left-radius:12px;
-moz-border-radius-bottomleft:12px;
-moz-border-radius-topleft:12px;
-webkit-border-bottom-left-radius:12px;
-webkit-border-top-left-radius:12px;
}
.btn{
/* This class is assigned to every share button */
background-color:white;
height:90px;
left:0;
top:0;
width:60px;
position:relative;
margin:20px 0 0 10px;
float:left;
}
.bcontent{
/* Positioned inside the .btn container */
position:absolute;
top:auto;
bottom:20px;
left:0;
}
With the speed with which modern browsers render JavaScript, it gets easier to make eye-catching animations, previously reserved only for technologies as Adobe Flash.
But before getting down to work, we need to include two script files in the head of our page:
$(document).ready(function(){
/* This code is run on page load */
var deg=0;
var dif=-3;
/* Assigning the buttons to a variable for speed: */
var arr = $('.btn');
/* Caching the length of the array in a vŠ°riable: */
var len = arr.length;
/* Finding the centers of the animation container: */
var centerX = $('#stage').width()/2 - 40;
var centerY = $('#stage').height()/2 - 60;
/* Applying relative positioning to the buttons: */
arr.css('position','absolute');
/* The function inside the interval is run 25 times per second */
setInterval(function(){
/* This forms an area with no activity on mouse move in the middle of the stage */
if(Math.abs(dif)<0.5) return false;
/* Increment the angle: */
deg+=dif;
/* Loop through all the buttons: */
$.each(arr,function(i){
/* Calculate the sine and cosine with the new angle */
var eSin = Math.sin(((360/len)*i+deg)*Math.PI/180);
var eCos = Math.cos(((360/len)*i+deg)*Math.PI/180);
/* Setting the css properties */
$(this).css({
top:centerY+25*eSin,
left:centerX+90*eCos,
opacity:0.8+eSin*0.2,
zIndex:Math.round(80+eSin*20)
});
})
},40);
/* Detecting the movements of the mouse and speeding up or reversing the rotation accordingly: */
var over=false;
$("#stage").mousemove(function(e){
if(!this.leftOffset)
{
/* This if section is only run the first time the function is executed. */
this.leftOffset = $(this).offset().left;
this.width = $(this).width();
}
/* If the mouse is over a button, set dif to 0, which halts the animation */
if(over) dif=0;
else
dif = -5+(10*((e.pageX-this.leftOffset)/this.width));
/* In the other case calculate the speed according to the X position of the mouse */
});
/* Detecting whether the mouse is positioned above a share button: */
$(".bcontent").hover(
function(){over=true;dif=0;},
function(){over=false;}
);
});
0 komentar:
Posting Komentar