How To Customize Your Cursor!

Photo by Christopher Gower on Unsplash
.custom-cursor {
width: 40px;
height: 40px;
border: 2px solid white;
opacity: 0.8;
position: absolute;
border-radius: 50%;
top: 0;
left: 0;

@include transform(scale(0));
@include transition(all 0.2s ease);

&:after{
content: '';
width: 6px;
height: 6px;
background-color: yellow;
display: block;
z-index: 1;
opacity: 1;
border-radius: 50%;
position: relative;
top: calc(50% - 3px);
left: calc(50% - 3px);
animation: bounce 0.4s infinite alternate;

@include keyframes(bounce){
from{
@include transform(scale(1));
}
to{
@include transform(scale(1.6));
}
}
}

}
const cursor = document.querySelector('.custom-cursor');document.addEventListener('mousemove', e => {
cursor.setAttribute("style", "transform: scale(1); top: "+(e.pageY - 20)+"px; left: "+(e.pageX - 20)+"px;");
});
//SCSS.custom-cursor {
width: 40px;
height: 40px;
border: 2px solid white;
opacity: 0.8;
position: absolute;
border-radius: 50%;
top: 0;
left: 0;

@include transform(scale(0));
@include transition(all 0.2s ease);
//NEW CLASS &.yellow-attitude{
border: 2px solid yellow;
background-color: rgba(yellow, 0.4);

@include transform(scale(1.4)!important);
@include transition(all 0.2s ease);
}

&:after{
content: '';
width: 6px;
height: 6px;
background-color: yellow;
display: block;
z-index: 1;
opacity: 1;
border-radius: 50%;
position: relative;
top: calc(50% - 3px);
left: calc(50% - 3px);
animation: bounce 0.4s infinite alternate;

@include keyframes(bounce){
from{
@include transform(scale(1));
}
to{
@include transform(scale(1.6));
}
}
}

}

//JAVASCRIPT
var element = document.getElementById('myitem');element.addEventListener("mouseover", e => {
cursor.classList.add("yellow-attitude");
});
element.addEventListener("mouseleave", e => {
cursor.classList.remove("yellow-attitude");
// alert('jo');
});
//HTML<h1 id="myitem">HOVER ME</h1>

--

--

--

Hello there! My name is Ioanna Vasdeki aka Jokova! I’m a passionate front-end developer </>. In my free time, I love cooking, getting outside & walking around!!

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jokova

Jokova

Hello there! My name is Ioanna Vasdeki aka Jokova! I’m a passionate front-end developer </>. In my free time, I love cooking, getting outside & walking around!!

More from Medium

What is Remote Monitoring & Management (RMM)?

How integers are stored in memory using two’s complement

Does snacking during the day help your brain function?

Confidential Computing approach for secure-by-design data collaboration in genomics