Heart Beat

Developer
Keyon
Size
3,505 Kb
Views
4,048
  1. Heart Beat Previews
  2. Heart Beat HTML Codes
  3. Heart Beat CSS Codes
  4. Heart Beat JS Codes

How do I make an heart beat?

What is a heart beat? How do you make a heart beat? This script and codes were developed by Keyon on 10 January 2023, Tuesday.

Heart Beat Previews
IQ Test

Heart Beat - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Heart Beat</title> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg id="heart" class="heart" style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="#F8BBD0" d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" />
</svg>
<svg id="heartB" class="hidden heartb" style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="#F8BBD0" d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C8.17,3 8.82,3.12 9.44,3.33L13,9.35L9,14.35L12,21.35V21.35M16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35L11,14.35L15.5,9.35L12.85,4.27C13.87,3.47 15.17,3 16.5,3Z" />
</svg>
<form> <div id="switch" class="switch "> <label> Normal <input type="checkbox" id="faster"> <span class="lever" id="faster"></span> Love </label> </div>
</form>
<a id="ReloadBtn" onClick="Reload()" class="waves-effect btnr waves-light btn blue-grey lighten-1 hidden"><i class="material-icons right">replay</i>Reload</a>
<div class="Subtitle"> <p>Keyon - <a style="color:#00897B; text-decoration:none;" href="http://www.uplabs.com/KeyonLulu" target="_Blank">UpLabs</a></p>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Heart Beat - Script Codes CSS Codes

html { background: -webkit-linear-gradient(#FAFAFA, #FCE4EC); width:100vw; height:100vh;
}
.heart { position: absolute; margin-left: auto; margin-right: auto; left:calc( 50% - 10px ); top:45%; transform: scale(5); animation: beat 3s ease-in-out infinite; transition: all 0.5s ease-on-out;
}
@-webkit-keyframes beat { 0% { transform: scale(5);} 10% { transform: scale(5);} 20% { transform: scale(5);} 30% { transform: scale(5.7);} 40% { transform: scale(5);} 50% { transform: scale(5.7);} 60% { transform: scale(5);} 100% { transform: scale(5);}
}
form { width:150px; height:50px; position: absolute; top:calc(50% - 25px + 150px); left:calc(50% - 70px);
}
.hidden { opacity:0; pointer-events: none; transition: all 0.5s ease-on-out;
}
.heartb { position: absolute; margin-left: auto; margin-right: auto; left:calc( 50% - 10px ); top: 45%; transform: scale(5); transition: all 0.5s ease-on-out;
}
.btnr { position: absolute; top:calc(50% - 25px + 150px); left:calc(50% - 70px);
}
.Subtitle { position: absolute; text-align: center; bottom: 5px; left: 0; right: 0; margin-left: auto; margin-right: auto; color: #607D8B; z-index: 999; font-family: Roboto; font-size: 19px;
}

Heart Beat - Script Codes JS Codes

var pfx = ["webkit", "moz", "MS", "o", ""], // Allow browser prefixes to work for PrefixedEvent rotates = $('.heart'), // Obtain all rotates prevent = false; // Prevent new element from being created each iteration
function PrefixedEvent(element, type, callback) { // Allow one JS listener based on browser	for (var p = 0; p < pfx.length; p++) {	if (!pfx[p]) type = type.toLowerCase();	element.addEventListener(pfx[p]+type, callback, false);	}
}
function listen() { // Listen for animationIterations. Named because it needs to applied to cloned elements for(var i = 0, j = rotates.length; i < j; i ++) { // Add listener to each `rotate` PrefixedEvent(rotates[i], "AnimationIteration", function() { // Apply the listener based on browser if(!$('#faster').is(':checked') && !prevent) { // This happens if box is not checked var el = $(this), newOne = el.clone(true).css({'animation':'beat 3s ease-in-out infinite'}); // Make a clone of the element so the animation can be restarted. See https://css-tricks.com/restart-css-animation/ for full info el.before(newOne); $("." + el.attr("class") + ":last").remove(); // Remove old element rotates = $('.heart'); // Update list of `rotate`s listen(); // Apply listeners again prevent = true; // Prevent this if from happening directly after } else if($('#faster').is(':checked') && prevent) { // Thisappens if the box is checked prevent = false; // Prevent this if from happening directly after var el = $(this), newOne = el.clone(true).css({'animation':'beat 1.5s ease-in-out infinite'}); // Make a clone of the element so the animation can be restarted. See https://css-tricks.com/restart-css-animation/ for full info el.before(newOne); $("." + el.attr("class") + ":last").remove(); // Remove old element rotates = $('.heart');// Update list of `rotate`s listen(); // Apply listeners again } }); }
}
listen(); // Apply listeners
$("#heart").click(function() { $('#heart').addClass('hidden'); $('#heartB').removeClass('hidden'); $('#ReloadBtn').removeClass('hidden'); $('#switch').addClass('hidden');
});
function Reload() { window.location.reload(false);
}
Heart Beat - Script Codes
Heart Beat - Script Codes
Home Page Home
Developer Keyon
Username Keyon
Uploaded January 10, 2023
Rating 3
Size 3,505 Kb
Views 4,048
Do you need developer help for Heart Beat?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Keyon (Keyon) Script Codes
Name
Zelda Breath of the Wild Cartridge
Gooey Eclipse
The IT Crowd Window
MEMOREYES
Presentation - Material Design and Parallax
Switch
Polaroid Snap Realistic
Simple Login
Profile Box
Notepad Project Neon
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!