Today twitter has been introduced a new heart (like) button, it is actually a replacement for favorite button. I love the way twitter has implemented cool animation effect for click action. This post will explain you, how to implement this using CSS3 and Jquery. Read my previous post Facebook Like System with Jquery, MySQL and PHP, you will understand more about Like System database design and ajax functionality. Take a quick look at the live demo and click the hearts.
Download Script 
Live DemoDatabase Design
Read my previous post Facebook Like System with Jquery, MySQL and PHP
HTML Code
Display the news feed based on database message ID.
<div class="feed" id="feed1">
Social Network Script http://thewallscript.com
<div class="heart " id="like1" rel="like"></div>
<div class="likeCount" id="likeCount1">14</div>
</div>
<div class="feed" id="feed2">
OAuth Login http://oauthlogin.com
<div class="heart" id="like2" rel="like"></div>
<div class="likeCount" id="likeCount2">10</div>
</div>
.......
.......
.......
Social Network Script http://thewallscript.com
<div class="heart " id="like1" rel="like"></div>
<div class="likeCount" id="likeCount1">14</div>
</div>
<div class="feed" id="feed2">
OAuth Login http://oauthlogin.com
<div class="heart" id="like2" rel="like"></div>
<div class="likeCount" id="likeCount2">10</div>
</div>
.......
.......
.......
Frames Background Image
Click on the image for large view.
CSS Code
Displaying first heart frame.
.heart {
background: url(images/web_heart_animation.png);
background-position: left;
background-repeat: no-repeat;
height: 50px;
width: 50px;
cursor: pointer;
position: absolute;
left:-14px;
background-size:1450px; //actual background size 2900px
}
.heart:hover
{
background-position: right; //displaying last heart frame
}
.likeCount
{
margin-top: 13px;
margin-left: 28px;
font-size: 16px;
color: #999999
}
background: url(images/web_heart_animation.png);
background-position: left;
background-repeat: no-repeat;
height: 50px;
width: 50px;
cursor: pointer;
position: absolute;
left:-14px;
background-size:1450px; //actual background size 2900px
}
.heart:hover
{
background-position: right; //displaying last heart frame
}
.likeCount
{
margin-top: 13px;
margin-left: 28px;
font-size: 16px;
color: #999999
}
CSS Animation
Here CSS code is animating the background image frame by frame, read more about CSS keyframe - CSS3 Animation Effects with Keyframes
@-webkit-keyframes heartBlast
{
0% {background-position: left;}
100% {background-position: right;}
}
@keyframes heartBlast
{
0% {background-position: left;}
100% {background-position: right;}
}
.heartAnimation
{
-webkit-animation-name: heartBlast; //webkit broswers
animation-name: heartBlast;
-webkit-animation-duration: .8s;
animation-duration: .8s;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-timing-function: steps(28); //background frames count 28
animation-timing-function: steps(28);
background-position: right;
}
{
0% {background-position: left;}
100% {background-position: right;}
}
@keyframes heartBlast
{
0% {background-position: left;}
100% {background-position: right;}
}
.heartAnimation
{
-webkit-animation-name: heartBlast; //webkit broswers
animation-name: heartBlast;
-webkit-animation-duration: .8s;
animation-duration: .8s;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-timing-function: steps(28); //background frames count 28
animation-timing-function: steps(28);
background-position: right;
}
Modify the animation timing functions based on your background frames.
JavaScript Code
Contains javascipt cod $("body").on('click','.heart',function(){}- heart is the class name of the DIV tag. Using $(this).attr("id") calling DIV tag ID value. You will find the message_like_ajax.php function in Facebook Like System with Jquery, MySQL and PHP
<script src="jquery.min.js"></script>
<script>
$(document).ready(function()
{
$('body').on("click",'.heart',function()
{
var A=$(this).attr("id");
var B=A.split("like"); //splitting like1 to 1
var messageID=B[1];
$(this).css("background-position","")
var D=$(this).attr("rel");
$.ajax({
type: "POST",
url: "message_like_ajax.php",
data: dataString,
cache: false,
success: function(data)
{
$("#likeCount"+messageID).html(data);
if(D === 'like')
{
$(this).addClass("heartAnimation").attr("rel","unlike"); //applying animation class
}
else
{
$(this).removeClass("heartAnimation").attr("rel","like");
$(this).css("background-position","left");
}
}); //ajax end
});//heart click end
});
</script>
<script>
$(document).ready(function()
{
$('body').on("click",'.heart',function()
{
var A=$(this).attr("id");
var B=A.split("like"); //splitting like1 to 1
var messageID=B[1];
$(this).css("background-position","")
var D=$(this).attr("rel");
$.ajax({
type: "POST",
url: "message_like_ajax.php",
data: dataString,
cache: false,
success: function(data)
{
$("#likeCount"+messageID).html(data);
if(D === 'like')
{
$(this).addClass("heartAnimation").attr("rel","unlike"); //applying animation class
}
else
{
$(this).removeClass("heartAnimation").attr("rel","like");
$(this).css("background-position","left");
}
}); //ajax end
});//heart click end
});
</script>
Love it :)
ReplyDeletetwitter? ...is Bootstrap?
ReplyDeletenice like animation
ReplyDeleteIs beautiful, good animation <3
ReplyDeleteLovely
ReplyDeletenow every one is going to put this in his website
ReplyDeleteThanks for post this article .
ReplyDeleteHi Sirinivas,
ReplyDeleteThis is truly great, every little details matters for an app or website these days.
This will be a nice addition to my site(s) :)
You must have get the inspiration from Diwali event :)
Thank you
DeleteWOW!!!!
ReplyDeleteGood
Deleteawesome sir !
ReplyDeleteSir, Nothing Amazing than this. If you can put a tutorial of using chrome push notification service on website it would be great. Thank you
ReplyDeleteCool <3
ReplyDeleteI love it you are the best!
ReplyDelete