Welcome to yet another exciting tutorial by Coding Artist. Building projects is one of the best ways to learn JavaScript. So in today’s tutorial let us expand our javascript knowledge with a fun project called ‘Heart Trails Follow Mouse’. To build this project we need HTML, CSS, and Javascript.
Video Tutorial:
For a better understanding of how we built the functionality of this project, I would advise you to watch the video below. If you find the video helpful give it a like and subscribe to my YouTube channel where I post new tips, tricks, and tutorials related to HTML, CSS, and Javascript.
Project Folder Structure:
Let’s build the project folder structure before we begin writing the code. We create a project folder called ‘Hearts Trail’. Inside this folder, we have three files. These files are index.html, style.css, and script.js.
HTML:
We begin with the HTML Code. First, create a file called – ‘index.html’. Copy the code below and paste it into your HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hearts Trail</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container"></div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
Â
CSS:
Next, we style our list using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
body {
padding: 0;
margin: 0;
overflow: hidden;
}
:root {
--color: red;
--size: 0;
}
* {
box-sizing: border-box;
}
.heart-container {
position: absolute;
opacity: 1;
}
.heart {
width: var(--size);
height: var(--size);
transform: rotate(45deg);
transform-origin: center;
position: relative;
background: var(--color);
margin: 10px auto;
}
.heart:before,
.heart:after {
content: "";
position: absolute;
width: var(--size);
height: var(--size);
border-radius: 50%;
background: var(--color);
}
.heart:before {
left: calc(var(--size) / 2 * -1);
}
.heart:after {
top: calc(var(--size) / 2 * -1);
}
Javascript:
Finally, we add functionality using Javascript. Once again copy the code below and paste it into your script file.
The steps included in creating are:
- Create variable initializations, references to HTML elements
- Then create ‘isTouchDevice()’, which gives us the device type so that we could use it for responsible behavior. This also helps us to decide on the event to use based on device type.
- When the user starts moving the mouse or starts touching ‘drawHearts’ will be set to true so that new hearts are created, as soon as the user takes the mouse away from the screen or stops touching ‘drawHearts’ is set to false to stop making new hearts.
- When the page loads we call ‘startCreation’ to begin creating heart divs. We start creating the hearts if ‘drawHearts’ is set to true. The hearts would be close to the mouse pointer so we will randomly generate a number between 5 and 50 to set the distance between the mouse pointer and the heart. Initially, the heart has an opacity of 1 and the visible flag is set to true inside the hearts array. Then we call the ‘updateHearts’ function. We continue calling the ‘startCreation’ function after a 50ms interval to continue the animation infinitely.
- In ‘updateHearts’ the opacity of each heart is reduced until visible is true and once the opacity reaches 0 we set visible to false and remove the heart from our screen as well as from heart array.
//Initial References
const container = document.querySelector(".container");
let drawHearts;
let mouseX = 0,
mouseY = 0;
let hearts = [];
//Red Shades
let colors = ["#ff0000", "#dc143c", "#ff4040", "#ed2939", "#fe2712", "#ed1c24"];
//Events Object
let events = {
mouse: {
move: "mousemove",
stop: "mouseout",
},
touch: {
move: "touchmove",
stop: "touchend",
},
};
let deviceType = "";
//Detect touch device
const isTouchDevice = () => {
try {
//We try to create TouchEvent (It would fail for desktops and throw error)
document.createEvent("TouchEvent");
deviceType = "touch";
return true;
} catch (e) {
deviceType = "mouse";
return false;
}
};
//Random number between given range
function randomNumberGenerator(min, max) {
return Math.random() * (max - min) + min;
}
//Create Hearts
function startCreation() {
//If drawHearts = true only then start displaying hearts. This is done to stop hearts creation when mouse is not on the screen.
if (drawHearts) {
//Create Div
let div = document.createElement("div");
div.classList.add("heart-container");
//Set left and top based on mouse X and Y
div.style.left = mouseX + randomNumberGenerator(5, 50) + "px";
div.style.top = mouseY + randomNumberGenerator(5, 50) + "px";
//Random shade of Red
let randomColor =
colors[Math.floor(randomNumberGenerator(0, colors.length - 1))];
//heart dic
div.innerHTML = `<div class="heart"></div>`;
div.style.opacity = 1;
//Set the value of variable --size to random number
let root = document.querySelector(":root");
let sizeValue = randomNumberGenerator(10, 20);
//Random height/width value
//You can change this
root.style.setProperty("--size", sizeValue + "px");
root.style.setProperty("--color", randomColor);
container.appendChild(div);
//set visible flag for div
hearts.push({
visible: true,
});
}
updateHearts();
window.setTimeout(startCreation, 50);
}
function updateHearts() {
for (let i in hearts) {
//get div at current index
let heartContainer = document.getElementsByClassName("heart-container")[i];
//If visible
if (hearts[i].visible) {
heartContainer.style.opacity = +heartContainer.style.opacity - 0.1;
//If 0 set visible to false
if (heartContainer.style.opactiy == 0) {
hearts[i].visible = false;
}
} else {
//if div is not visible remove it and remove entry from hearts array
heartContainer.remove();
hearts.splice(i, 1);
}
}
}
isTouchDevice();
document.addEventListener(events[deviceType].move, function (e) {
mouseX = isTouchDevice() ? e.touches[0].pageX : e.pageX;
mouseY = isTouchDevice() ? e.touches[0].pageY : e.pageY;
drawHearts = true;
});
document.addEventListener(events[deviceType].stop, function (e) {
drawHearts = false;
});
window.onload = () => {
drawHearts = false;
startCreation();
};
Â
Go ahead and customize the project the way you like. If you have any queries, suggestions, or feedback comment below. Download the source code by clicking on the ‘Download Code’ button below.
