September 11, 2014

How to create a pulse effect on hover using jQuery?

Create a pulse effect on hover using jQuery

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

This method uses the idea of changing the font size simultaneously. This works on hover only.

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

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

$('.heart').hover(
       function(){ $(this).addClass('beat')
         animateHeart() },
       function(){ $(this).removeClass('beat') }
)

That's 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