Twitter Heart Button CSS3 Animation
Wall Script
Follow Me:
Tuesday, November 03, 2015

Twitter Heart Button CSS3 Animation

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 Demo

Database 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>

.......
.......
.......

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
}

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;
}

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>
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


15 comments:

  1. now every one is going to put this in his website

    ReplyDelete
  2. Hi Sirinivas,
    This 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 :)

    ReplyDelete
  3. Sir, Nothing Amazing than this. If you can put a tutorial of using chrome push notification service on website it would be great. Thank you

    ReplyDelete

Make in India