Discover how to enhance your website design and user experience with unique cursor effects. Learn how to add cursor trail effects, animated cursors, custom cursors, and cursor animations with our step-by-step guide.
Table of Contents
The cursor is a small but mighty element of a website's design. It's often overlooked, but it can have a big impact on the user experience. By adding unique cursor effects, you can make your website stand out and engage your visitors in a new and interesting way. In this post, we'll show you how to add custom cursor effects to your website and share some creative ideas to get you started. Whether you're a web designer looking to add some flair to your projects or a blogger looking to give your site a fresh look, this tutorial is for you. So let's get started and get creative with cursors!
Let's start making an amazing unique cursor effect Using HTML, CSS and JavaScript step by step.
Concept by: Ivan Grozdic
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our cursor effects.
After creating the files just paste the following codes into your file. Remember that you must save a file with the .html extension.
Step 2 (CSS Code):
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our cursor effect. We will also add some padding and margin properties to ensure that everything looks correct.
This will give our cursor an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');
:root {
--blue: #102770;
--white: #ffffff;
--yellow: #ffeba7;
--purple: #9b59b6;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
::selection {
color: var(--yellow);
background-color: var(--blue);
}
::-moz-selection {
color: var(--yellow);
background-color: var(--blue);
}
body{
background-color: var(--white);
background-image: url('https://assets.codepen.io/1462889/back-page.svg');
background-size: cover;
background-position: center;
margin: 0;
padding: 0;
overflow-x: hidden;
min-height: 100vh;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
p{
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 26px;
line-height: 1.7;
color: var(--blue);
margin: 0;
}
.section-fluid-main{
position: relative;
display: block;
width: calc(100% - 40px);
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
max-width: 1050px;
padding-top: 50px;
padding-bottom: 90px;
-ms-flex-item-align: center;
align-self: center;
z-index: 3;
}
.section-row{
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
-ms-flex-pack: center;
justify-content: center;
}
.section-col{
position: relative;
width: 100%;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
padding: 15px;
}
/* #Cursor
================================================== */
.cursor,
.cursor2,
.cursor3{
position: fixed;
border-radius: 50%;
transform: translateX(-50%) translateY(-50%);
pointer-events: none;
left: -100px;
top: 50%;
z-index: 4;
}
.cursor{
background-color: var(--blue);
height: 0;
width: 0;
}
.cursor2,.cursor3{
height: 50px;
width: 50px;
transition: all 200ms ease-out;
background-position: center;
background-size: 0 0;
}
.cursor2.hover,
.cursor3.hover{
height: 220px;
width: 320px;
border:none;
border-radius: 8px;
}
.cursor2{
border: 2px solid var(--blue);
box-shadow: 0 0 12px rgba(16, 39, 112, 0.2);
}
.cursor2.hover{
background-size: cover;
box-shadow: 0 0 0 rgba(16, 39, 112, 0.2);
}
body.img-1-wrap .cursor2,.cursor3{
background-image: url('https://assets.codepen.io/1462889/sl1.jpg');
}
body.img-2-wrap .cursor2,.cursor3{
background-image: url('https://assets.codepen.io/1462889/sl2.jpg');
}
body.img-3-wrap .cursor2,.cursor3{
background-image: url('https://assets.codepen.io/1462889/sl3.jpg');
}
body.img-4-wrap .cursor2,.cursor3{
background-image: url('https://assets.codepen.io/1462889/sl4.jpg');
}
body.logo-wrap .cursor2,.cursor3{
background-image: none;
height: 36px;
width: 36px;
}
body.logo-wrap .cursor2.hover,
body.logo-wrap .cursor3.hover{
height: 36px;
width: 36px;
transform: scale(2) translateX(-25%) translateY(-25%);
border-radius: 50%;
background-color: var(--yellow);
}
.hover-target{
position: relative;
display: inline-block;
text-decoration: none;
color: var(--purple);
transition: color 250ms ease;
}
.hover-target:before{
position: absolute;
content: '';
height: 0;
border-radius: 1px;
bottom: 0;
left: -10px;
width: calc(100% + 20px);
display: block;
background-color: var(--yellow);
transition: height 250ms ease;
mix-blend-mode: difference;
opacity: 0.6;
}
.hover-target:hover:before{
height: 100%;
}
.hover-target:hover{
z-index: 5;
color: var(--yellow);
}
.logo {
position: fixed;
top: 25px;
left: 25px;
display: block;
z-index: 1000;
}
.logo img {
height: 26px;
width: auto;
display: block;
}
.logo:before {
display: none;
} Step 3 (JavaScript Code):
Finally, we need to create a function for cursor effects and control the cursor effects in JavaScript. Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file. Remember, you’ve to create a file with .js extension.
document.getElementsByTagName("body")[0].addEventListener("mousemove", function(n) {
t.style.left = n.clientX + "px",
t.style.top = n.clientY + "px",
e.style.left = n.clientX + "px",
e.style.top = n.clientY + "px",
i.style.left = n.clientX + "px",
i.style.top = n.clientY + "px"
});
var t = document.getElementById("cursor"),
e = document.getElementById("cursor2"),
i = document.getElementById("cursor3");
function n(t) {
e.classList.add("hover", "hover-2"), i.classList.add("hover", "hover-2")
}
function s(t) {
e.classList.remove("hover", "hover-2"), i.classList.remove("hover", "hover-2")
}
s();
for (var r = document.querySelectorAll(".hover-target, .hover-target-2"), a = r.length - 1; a >= 0; a--) {
o(r[a])
}
function o(t) {
t.addEventListener("mouseover", n), t.addEventListener("mouseout", s)
}
document.addEventListener('DOMContentLoaded', function () {
var hoverLink = document.querySelector('.logo');
var bodychange = document.querySelector('body');
hoverLink.addEventListener('mouseenter', function (e) {
bodychange.classList.add('logo-wrap');
});
hoverLink.addEventListener('mouseleave', function () {
bodychange.classList.remove('logo-wrap');
})
})
document.addEventListener('DOMContentLoaded', function () {
var hoverLink = document.querySelector('.img-1');
var bodychange = document.querySelector('body');
hoverLink.addEventListener('mouseenter', function (e) {
bodychange.classList.add('img-1-wrap');
});
hoverLink.addEventListener('mouseleave', function () {
bodychange.classList.remove('img-1-wrap');
})
})
document.addEventListener('DOMContentLoaded', function () {
var hoverLink = document.querySelector('.img-2');
var bodychange = document.querySelector('body');
hoverLink.addEventListener('mouseenter', function (e) {
bodychange.classList.add('img-2-wrap');
});
hoverLink.addEventListener('mouseleave', function () {
bodychange.classList.remove('img-2-wrap');
})
})
document.addEventListener('DOMContentLoaded', function () {
var hoverLink = document.querySelector('.img-3');
var bodychange = document.querySelector('body');
hoverLink.addEventListener('mouseenter', function (e) {
bodychange.classList.add('img-3-wrap');
});
hoverLink.addEventListener('mouseleave', function () {
bodychange.classList.remove('img-3-wrap');
})
})
document.addEventListener('DOMContentLoaded', function () {
var hoverLink = document.querySelector('.img-4');
var bodychange = document.querySelector('body');
hoverLink.addEventListener('mouseenter', function (e) {
bodychange.classList.add('img-4-wrap');
});
hoverLink.addEventListener('mouseleave', function () {
bodychange.classList.remove('img-4-wrap');
})
})Final Output:
Conclusion:
In conclusion, adding unique cursor effects to your website can be a simple yet effective way to enhance your website design and improve user experience. By using cursor trail effects, animated cursors, custom cursors, and cursor animations, you can create a more engaging and interactive website that stands out from the rest.
In this guide, we have provided step-by-step instructions for implementing each type of cursor effect, as well as best practices for using cursor effects in a way that enhances user experience. We have also provided examples of websites that use cursor effects effectively, to inspire readers to experiment with cursor effects on their own websites.
Remember to keep cursor effects subtle and non-distracting, use them to guide users, and ensure they do not interfere with website functionality. With these tips and instructions, you can elevate your website design and user experience with unique cursor effects.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
