About Custom Mouse Cursor
Add custom Mouse Cursor Using HTML,CSS, and JAVASCRIPT it is made by Coding Vlogs youtube Channel. you can download the source code or copy source code and use it for free. if you have not subscribe our youtube channel so subscribe now we are creating beautiful coding project and provide source code for free. For Download Source Code Scroll Down
Why We Need A Custom Mouse Cursor?
In This Blog You Will Learn How to Make or Add A Custom Mouse Cursor easily. And lots of websites use this technology for example- Anderson Brothers, Cocota Studio, etc. Custom cursor enhances the readability of the document and grabs the user attention to a specific part of the webpage. Today we are going to learn how to create a custom cursor for a webpage using HTML, CSS and Javascript. So, we have to create a custom Cursor. Adding a custom Cursor menu to your website or webpage makes it look more customized and relevant to the Cursor and offers you the freedom to add desired features to it. Still, it’s easy to overlook cursors and their impact on the user experience of our sites. Customizing cursors is just as easy and adds that extra bit of understated flourish when used correctly. Browsers take it a bit further. Hover over the link and the cursor changes from the default black arrow to a Big Circle otherwise known as a pointer. In this article, we will be creating a custom Mouse Cursor for a webpage or website. It mainly involves some steps. that are given below. This can really improve user experience, and lately I've been wondering how it works. So I started to do some research and I found out how it is done.
For Beginner or Not?
This article is beginner-friendly, but to understand some concepts you should have basic knowledge of HTML, CSS And Javascript. Customizing a mouse cursor with CSS is pretty simple, as CSS already has a property to handle this. All we need to do is identify this property and use it. As Frontend Developer we use this property often it is none other than the almighty cursor property. Yes, that property is what gives us the power to make a custom cursor of our choice.
HTML
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Coding Vlogs</title> <link rel="stylesheet" href="./style.css"> </head> <body> <main> <div style="text-align: center; padding-top: 100px;"> <a data-hover class="button">test</a> </div> </main> <div class="cursor"> <div class="cursor__inner cursor__inner--circle"></div> <div class="cursor__inner cursor__inner--dot"></div> </div> <!-- Scripts --> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js'></script><script src="./script.js"></script> </body> </html>
Style (CSS)
body{
cursor: none;
}
*, *::after, *::before {
box-sizing: border-box;
cursor: none !important;
}
.cursor__inner {
z-index: 999999;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
/* mix-blend-mode: difference; */
border-radius: 50%;
}
.cursor__inner--dot {
width: 6px;
height: 6px;
background: #000;
}
.cursor__inner--circle {
width: 20px;
height: 20px;
border: 1px solid #000;
}
.button {
display: inline-block;
overflow: hidden;
min-height: 40px;
min-width: 180px;
padding-top: 15px;
border-radius: 4px;
background-color: #f5f6f8;
}
JavaScript
{
// Some help functions.
const shuffleArray = arr => arr.sort(() => Math.random() - 0.5);
const lineEq = (y2, y1, x2, x1, currentVal) => {
let m = (y2 - y1) / (x2 - x1);
let b = y1 - m * x1;
return m * currentVal + b;
};
const lerp = (a, b, n) => (1 - n) * a + n * b;
const body = document.body;
const bodyColor = getComputedStyle(body).getPropertyValue('--color-bg').trim() || 'white';
const getMousePos = (e) => {
let posx = 0;
let posy = 0;
if (!e) e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + body.scrollLeft + document.documentElement.scrollLeft;
posy = e.clientY + body.scrollTop + document.documentElement.scrollTop;
}
return { x : posx, y : posy }
}
// Window sizes.
let winsize;
const calcWinsize = () => winsize = {width: window.innerWidth, height: window.innerHeight};
calcWinsize();
// Recalculate window sizes on resize.
window.addEventListener('resize', calcWinsize);
// Custom mouse cursor.
class CursorFx {
constructor(el) {
this.DOM = {el: el};
this.DOM.dot = this.DOM.el.querySelector('.cursor__inner--dot');
this.DOM.circle = this.DOM.el.querySelector('.cursor__inner--circle');
this.bounds = {dot: this.DOM.dot.getBoundingClientRect(), circle: this.DOM.circle.getBoundingClientRect()};
this.scale = 1;
this.opacity = 1;
this.mousePos = {x:0, y:0};
this.lastMousePos = {dot: {x:0, y:0}, circle: {x:0, y:0}};
this.lastScale = 1;
this.lastOpacity = 1;
this.initEvents();
requestAnimationFrame(() => this.render());
}
initEvents() {
window.addEventListener('mousemove', ev => this.mousePos = getMousePos(ev));
}
render() {
this.lastMousePos.dot.x = lerp(this.lastMousePos.dot.x, this.mousePos.x - this.bounds.dot.width/2, 1);
this.lastMousePos.dot.y = lerp(this.lastMousePos.dot.y, this.mousePos.y - this.bounds.dot.height/2, 1);
this.lastMousePos.circle.x = lerp(this.lastMousePos.circle.x, this.mousePos.x - this.bounds.circle.width/2, 0.15);
this.lastMousePos.circle.y = lerp(this.lastMousePos.circle.y, this.mousePos.y - this.bounds.circle.height/2, 0.15);
this.lastScale = lerp(this.lastScale, this.scale, 0.15);
this.lastOpacity = lerp(this.lastOpacity, this.opacity, 0.1);
this.DOM.dot.style.transform = `translateX(${(this.lastMousePos.dot.x)}px) translateY(${this.lastMousePos.dot.y}px)`;
this.DOM.circle.style.transform = `translateX(${(this.lastMousePos.circle.x)}px) translateY(${this.lastMousePos.circle.y}px) scale(${this.lastScale})`;
this.DOM.circle.style.opacity = this.lastOpacity
requestAnimationFrame(() => this.render());
}
enter() {
cursor.scale = 2.7;
}
leave() {
cursor.scale = 1;
}
click() {
this.lastScale = 1;
this.lastOpacity = 0;
}
}
const cursor = new CursorFx(document.querySelector('.cursor'));
// Custom cursor chnages state when hovering on elements with 'data-hover'.
[...document.querySelectorAll('[data-hover]')].forEach((link) => {
link.addEventListener('mouseenter', () => cursor.enter() );
link.addEventListener('mouseleave', () => cursor.leave() );
link.addEventListener('click', () => cursor.click() );
});
}
That's all now our custom cursor is ready. You can implement in your site / blog. If you Like our Post so please click on this Like button and don't forgot to Subscribe Our Youtube Channel. Follow us on social media Link is given below. And Share This Blogs To your Friends and Family.