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.

HTML

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

CSS code for some styling of the text and heart.

CSS

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.

jQuery

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

Thats it your done

Attachments:

I have used external attachments.

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
demo

No comments:

Post a Comment

Popular Posts

Views