How to design Heartbeat effect using JQuery and HTML?

  • 6447

Today, I am going to explain how to make HeartBeat effect using jquery, html and css . Many programmer always search this type of tutorials on web. But they don't find with the best, simple article on heartbeat effect using jquery.

Within jQuery library, there are thousands upon thousands of different effects that can be applied to your page to create a unique and dynamic user experience. Here i am going to creae beautiful heartbeat effect using jquery, html and css. this is originaly designed by Coderglass. Now I am going to display the output of our Heartbeat effect page.

Heartbeat effect page Output:

heartbeat-jquery-effect-html

index.html:

This is the html file for front-end design. Here is the code of this file.

<!DOCTYPE html>
<html>
<head>
  
<title>Heart Beat effect using html and java script - coder glass</title>
<link type="text/css" rel="stylesheet" href="styles.css" />
 <script type="text/javascript" src="https://code.jquery.com/jquery-1.5.2.js">
 </script>

<script type="text/javascript" 
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js">
</script>
	 	  
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
(function pulse(back) {
    $('#heart').animate(
{
'font-size': (back) ? '100px' : '140px',
            opacity: (back) ? 1 : 0.5
        }, 700, function(){pulse(!back)});
    $('#heart img').animate(
        {
            'width': (back) ? '500px' : '450px'
        }, 700);
})(false);
});//]]> 

</script>
  
</head>

<body style="background-color:#d62323;">

<div class="header">
<div id="logo" class="header"><img src="coderglass.png" /></div>
		
</div>
		
<div class="heart-body">
			
<center><div id="heart" class="heart-body">
<img src="heart-beat.png" /></div></center>
<div id="naming" class="heart-body">Designed by: Varun Singh</div>
<div id="founder" class="heart-body">Founder of: www.coderglass.com</div>			
</div>
</body>
</html>

style.css:

This file is used to set the every body part and other things on perfect postion.

.header{
width:100%;
height:90px;
position:absolute;
top:0;
left:0;
color:white;
z-index:7;
font-family:verdana;
	
}
#logo{
left:5%;
height:50px;
width:100px;
top:20px;
}
.heart-body{
	position:absolute;
	left:0px;
	top:8%;
	width:100%;
	height:500px;
	

}
#naming{
	left:70%;
	top:100%;
	font-family:verdana;
	font-size:18px;
	color:#fff;
	height:50px;
	width:400px;
}
#founder{
	left:70%;
	top:105%;
	font-family:verdana;
	font-size:18px;
	color:#fff;
	height:50px;
	width:400px;
}

 #heart{
    
}
.header{
	width:100%;
	height:90px;
	position:absolute;
	top:0;
	left:0;
	color:white;
	z-index:7;
	font-family:verdana;
	
}
#logo{
	left:5%;
	height:50px;
	width:100px;
	top:20px;
}
.heart-body{
	position:absolute;
	left:0px;
	top:8%;
	width:100%;
	height:500px;
	

}
#naming{
	left:70%;
	top:100%;
	font-family:verdana;
	font-size:18px;
	color:#fff;
	height:50px;
	width:400px;
}
#founder{
	left:70%;
	top:105%;
	font-family:verdana;
	font-size:18px;
	color:#fff;
	height:50px;
	width:400px;
}

 #heart{
    
}
Tags:
Varun Singh
Varun Singh

Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section. We will be very happy to hear that.

If you like my tutorial, please follow us on facebook, Insta, LinkedIn and Twitter.
I need your support to continue.