HeartBeat effect using Jquery, Html and css.

POSTED

AUTHOR: VARUN SINGH

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

Here is the output of the heartbeat effect .


download view


Implementation of code:


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

The End:

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, Google + and Twitter. I need your support to continue.


Comments: