Cupid in Pursuit

Developer
Anya Craig
Size
4,193 Kb
Views
34,408
  1. Cupid in Pursuit Previews
  2. Cupid in Pursuit HTML Codes
  3. Cupid in Pursuit CSS Codes
  4. Cupid in Pursuit JS Codes

How do I make an cupid in pursuit?

Cupid chases the heart with some JS magic, and when he catches it, it throbs with undying love!. What is a cupid in pursuit? How do you make a cupid in pursuit? This script and codes were developed by Anya Craig on 26 August 2022, Friday.

Cupid in Pursuit Previews
IQ Test

Cupid in Pursuit - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Cupid in Pursuit</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <head>	<link href="https://fonts.googleapis.com/css?family=Barrio" rel="stylesheet">
</head>
<body>	<div class="container">	<h1>	<span>C</span>	<span>u</span>	<span>p</span>	<span>i</span>	<span>d </span>	<span class="spacer"></span>	<span>i</span>	<span>n </span>	<span class="spacer"></span>	<span>P</span>	<span>u</span>	<span>r</span>	<span>s</span>	<span>u</span>	<span>i</span>	<span>t</span>	</h1>	<div id="cupid"></div>	<div id="heart"></div>	</div>
</body> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Cupid in Pursuit - Script Codes CSS Codes

/* BOX-SIZING: BORDER-BOX */
/* apply a natural box layout model to all elements, but allowing components to change */
html { box-sizing: border-box;
}
*, *:before, *:after { box-sizing: inherit;
}
/* CLEARFIX */
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
* { cursor: none;
}
body {	background-image: url("http://anyacraig.com/cupid-in-pursuit/images/cip_background.jpg");	background-size: cover;	background-repeat: no-repeat;	background-attachment: fixed;	background-position: center center;	margin: 0;	padding: 0; overflow: hidden;
}
.container {	width: 100vw;	height: 100vh;
}
h1 {	text-align: center;	margin-top: 75px;
}
h1 span {	transition: 0.2s ease-in-out; font-family: "Barrio", sans-serif; font-size: 60px; color: #bc0000; text-shadow: 3px 3px 0 #ff497a;
}
#cupid { width: 230px; height: 230px; position: absolute; top: 150; left: 150; background-image: url("http://anyacraig.com/cupid-in-pursuit/images/cip_cupid_left.png"); background-size: cover; background-repeat: no-repeat; animation-name: hoverBounce; animation-duration: 0.9s; animation-iteration-count: infinite; animation-timing-function: ease-out;
}
#heart { width: 40px; height: 60px; background-image: url("http://anyacraig.com/cupid-in-pursuit/images/cip_heart.png"); position: absolute; top: 150; left: 150; background-size: contain; background-repeat: no-repeat; transition: .2s transform ease-in-out;
}
@keyframes hoverBounce { 0%, 100% { transform: translateY(-10px); } 60% { transform: translateY(10px); }
}
h1 span {	display: inline-block;	transition: 0.5s ease-in-out;
}
.spacer {	width: 15px;
}
.up {	transform: translateY(-20px);
}
.caughtup {	animation-name: pulsing;	animation-duration: 1s;	animation-iteration-count: infinite;	transition: .5s all ease-in-out;	transform: scale(2);
}
@keyframes pulsing {	0%, 100%{	transform: scale(1);	}	50% {	transform: scale(2);	}
}

Cupid in Pursuit - Script Codes JS Codes

// The cursor position
var cursorX = 0, cursorY = 0;
// The cupid element
var cupid = document.getElementById("cupid");
// The heart that follows the cursor very closely and quickly
var heart = document.getElementById("heart");
// The position of the cupid element - initializing values
var cupidX = 0, cupidY = 0;
// The position of the heart element - initializing values
var heartX = 0, heartY = 0;
// Each letter in the title
var titleLetter = document.querySelectorAll("h1 span");
var touching;
// Variables that we will need later on
var opposite; // this will be the length of the "opposite" side of our imaginary triangle
var adjacent; // this will be the length of the "adjacent" side of our imaginary triangle
var angle; // this will be the angle of the vertex of our imaginary triangle
var imgSrc; // this will be the source of the background image of the cupid
// check if two elements are overlapping
function collision(div1, div2) { var x1 = div1.offsetLeft; var y1 = div1.offsetTop; var h1 = div1.clientHeight; var w1 = div1.clientWidth; var b1 = y1 + h1; var r1 = x1 + w1; var x2 = div2.offsetLeft; var y2 = div2.offsetTop; var h2 = div2.clientHeight; var w2 = div2.clientWidth; var b2 = y2 + h2; var r2 = x2 + w2; if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) { touching = false; return false } else { touching = true; caughtUp(); }
}
// add the animation class to the heart
function caughtUp() { heart.className = "caughtup";
}
// add the hover class to the letters
// and remove it after 400 milliseconds
function handleHover(element) { element.className = "up"; var self = element; var timeout = window.setTimeout(function(){ element.className = ""; }, 400);
}
// DOCUMENT READY
document.addEventListener("DOMContentLoaded", function(event) { // Adding the event listener for the mousemove document.onmousemove = function(e){ cursorX = e.pageX; // get the coordinate of the cursor on the x axis cursorY = e.pageY; // get the coordinate of the cursor on the y axis }; // Make the heart follow the cursor var heartLoop = setInterval(function(){ // Determine the new trajectory for the heart heartX = heartX + ((cursorX - heartX) / 2 ); // adjust x value by difference between cursor and heart heartY = heartY + ((cursorY - heartY) / 2 ); // adjust y value by difference between cursor and heart heart.style.left = heartX + "px"; // set left css property to new x value heart.style.top = heartY + "px"; // set top property to new y value if (touching == false) { heart.className -= " caughtUp"; } }, 5); // run every 5 milliseconds // The set interval function that checks where our cupid is and where it should be, based on where the cursor is var cupidLoop = setInterval(function(){ // Determine the new trajectory cupidX = cupidX + ((cursorX - cupidX) / 25); cupidY = cupidY + ((cursorY - cupidY) / 25); // Get the coordinates of the center of the cupid // so that we can use it to calculate the angle var cupidCenterX = cupidX + (cupid.clientWidth / 2); var cupidCenterY = cupidY + (cupid.clientHeight / 2); // Determine the new angle opposite = Math.abs(cursorY - cupidCenterY); adjacent = Math.abs(cursorX - cupidCenterX); angle = Math.atan(opposite/adjacent)/(Math.PI/180); if (cursorX > cupidCenterX && cursorY < cupidCenterY) { if (angle < 20) { // RIGHT imgSrc = "url('http://anyacraig.com/cupid-in-pursuit/images/cip_cupid_right.png')"; } else if (angle > 70) { // UP imgSrc = "url('http://anyacraig.com/cupid-in-pursuit/images/cip_cupid_up.png')"; } else { // UP RIGHT imgSrc = "url('http://anyacraig.com/cupid-in-pursuit/images/cip_cupid_up_right.png')"; } } else if (cursorX > cupidCenterX && cursorY > cupidCenterY) { if (angle < 20) { // RIGHT imgSrc = "url('http://anyacraig.com/cupid-in-pursuit/images/cip_cupid_right.png')"; } else if (angle > 70) { // DOWN imgSrc = "url('http://anyacraig.com/cupid-in-pursuit/images/cip_cupid_down.png')"; } else { // DOWN RIGHT imgSrc = "url('http://anyacraig.com/cupid-in-pursuit/images/cip_cupid_down_right.png')"; } } else if (cursorX < cupidCenterX && cursorY > cupidCenterY) { if (angle < 20) { // LEFT imgSrc = "url('http://anyacraig.com/cupid-in-pursuit/images/cip_cupid_left.png')"; } else if (angle > 70) { // DOWN imgSrc = "url('http://i.imgur.com/AHfi2Ka.png')"; } else { // DOWN LEFT imgSrc = "url('http://anyacraig.com/cupid-in-pursuit/images/cip_cupid_down_left.png')"; } } else if (cursorX < cupidCenterX && cursorY < cupidCenterY) { if (angle < 20) { // LEFT imgSrc = "url('http://anyacraig.com/cupid-in-pursuit/images/cip_cupid_left.png')"; } else if (angle > 70) { // UP imgSrc = "url('http://anyacraig.com/cupid-in-pursuit/images/cip_cupid_up.png')"; } else { // UP LEFT imgSrc = "url('http://anyacraig.com/cupid-in-pursuit/images/cip_cupid_up_left.png')"; } } // move the cupid cupid.style.left = cupidX + "px"; cupid.style.top = cupidY + "px"; cupid.style.backgroundImage = imgSrc; // call the collision function collision(cupid, heart); }, 30); // add event listeners to letters for (var i = 0; i < titleLetter.length; i++) { titleLetter[i].addEventListener("mouseenter", function() { handleHover(this); }); }
}); // end of document ready
Cupid in Pursuit - Script Codes
Cupid in Pursuit - Script Codes
Home Page Home
Developer Anya Craig
Username AnyaCraig
Uploaded August 26, 2022
Rating 3.5
Size 4,193 Kb
Views 34,408
Do you need developer help for Cupid in Pursuit?

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!

Anya Craig (AnyaCraig) Script Codes
Name
Fancy Two-Border Buttons
Overlay Hover Effect
Drawing Tablet
Simple Responsive Gallery
Rainbow Pride Slide
Responsive Square with Background Image
Text with Background Gradients and Text-Shadows
Flex Baseline Test
Bee flight animation using Snap.svg
Signpost rotation animation
Create amazing marketing copy 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!