September 11, 2014

How to create a pulse effect with jQuery?

Create a pulse effect with jQuery

On the other tutorial i have showed How to create a pulse effect with CSS3 Animation? and How to create a pulse effect on hover using jQuery?

I am going to use jQuery here. This method uses the idea of changing the font size simultaneously.

First we need to create heart. For that i am using Font Awesome. You can see the CSS file for that in the Attachment section below in this post.


<p>I <span class="heart"><i class="fa fa-heart"></i></span> YOU</p>

CSS code for some styling of the text and heart.


p {
  font: 75px Georgia; text-align: center;

.heart {
  color: firebrick;

.heart:hover {
  cursor: pointer;

As the Heart is built we can create the pulse effect using jQuery.


$(document).ready(function animateHeart() {
        fontSize: $('.heart').css('fontSize') == '75px' ? '65px' : '75px'
    }, 500, animateHeart);

Thats it your done


I have used external attachments.

<link href="//" rel="stylesheet">
<script src="//"></script>

No comments:

Post a Comment

Popular Posts