quarta-feira, 21 de dezembro de 2016

Sistema de curtir igual o do Twitter com CSS3 e PHP

Enviado em 13:04 - por Diguinho - Marcadores : , ,

Eu amo o jeito que o Twitter implementou o efeito dessa animação. Este post irá explicar, como implementar isso usando CSS3 e jQuery.




Baixar Script     Demonstração ao vivo 

código HTML
exibição do feed de notícias com base na 
 ID da mensagem de banco de dados.
<div class="feed" id="feed1">
Social Network Script 
<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>

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

Background quadros de imagem
Clique na imagem para a  visualizar.





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

Animação CSS
Aqui código CSS está animando o quadro de imagem de fundo.

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

Modificar as funções de animação cronometria em seus quadros de fundo. 

Código JavaScript
Contém javascipt $ ( "corpo") em ( 'clique', function () {}. 'Coração'. - Coração . É o nome de classe da tag DIV Usando $ (this) .attr ( "id" ) chamando DIV o valor ID.

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

Sobre o autor
Gabriel Medina é o autor deste blog, atualmente estuda eng. elétrica, ama jogar damas, assistir desenhos, filmes e séries, além de praticar esportes saudaveis.
Inscrever-se neste Blog via Email :

0 Comentários:

© 2017 Webzoon. Designed by Bloggertheme9
Powered by Blogger.
back to top