This content originally appeared on DEV Community and was authored by AWBSCode
In this tutorial, we will learn how to create a fun and interactive effect of two lines that follow the cursor on a webpage using HTML, CSS, and JavaScript. The lines will move dynamically as the cursor moves around the page, creating a unique visual effect that will engage your website visitors. We will go step-by-step through the process of setting up the HTML and CSS for the lines, and then use JavaScript to track the cursor position and update the lines' position accordingly. By the end of this tutorial, you will have a working example of this effect that you can customize and incorporate into your own web projects.
We will make a something like that:
HTML:
in the HTML we want to add to divs each div has 2 classes the first class is .line and the second class and the second class is unique class for each div like that:
<div class="line line-x"></div>
<div class="line line-y"></div>
CSS:
let's start CSS with remove basic styles and give the body a black background color:
* {
margin: 0;
padding: 0;
}
body {
background-color: black;
}
Now, we want to make a variable to save the depth of the line like that:
:root {
--depth: 10px;
}
We want to style the line. We will give it position: absolute to give it a freedom of movement and give it a transition: 0.1s to get a smooth movement and add more styles like that:
.line {
position: absolute;
background-color: #41f941;
box-shadow: 0 0 50px #41f94180;
transition: 0.1s;
opacity: 0.8;
}
Now, we need to style line-x and line-y. let's start with line-x. do you remember --depth? we want it now.
.line-x {
width: 100%;
height: var(--depth);
top: -15px;
}
And make the vice versa in line-y.
.line-y {
width: var(--depth);
height: 100%;
left: -15px;
}
JavaScript:
Let's start getting the elements like that:
// get elements
const lineX = document.querySelector(".line-x");
const lineY = document.querySelector(".line-y");
Well, we want when the cursor moves we set line-x's top to cursor X position using clientX and do the same thing in line-y like that:
document.addEventListener("mousemove", function (event) {
lineX.style.top = event.clientY + "px";
lineY.style.left = event.clientX + "px";
});
Very good, we did it but we want to make RGB animation. To make that we need to use CSS. In CSS code we will make that:
@keyframes color-change {
from {
filter: hue-rotate(0deg);
}
to {
filter: hue-rotate(360deg);
}
}
And apply the animation on line. like that:
.line {
animation-name: color-change;
animation-duration: 3s;
animation: color-change 5s infinite;
}
Now, We have a beautiful effect
This content originally appeared on DEV Community and was authored by AWBSCode
AWBSCode | Sciencx (2023-03-26T17:33:18+00:00) Create Two RGB cursor following lines using html, CSS and JavaScript. Retrieved from https://www.scien.cx/2023/03/26/create-two-rgb-cursor-following-lines-using-html-css-and-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.