I'm trying to give some style to my cursor with Javascript, with a mark that follows the cursor everywhere on screen. Now I'm trying to apply a specific style when I click on the page. The problem is that my function works but only once. Then I have to refresh the page so it can work again. I've used an addEventListener method with 'click', that I think is the proper method.
var cursor1 = document.querySelector(".cursor1");
var cursor2 = document.querySelector(".cursor2");
/*
this was some test.
function testscale(){
cursor1.animate(
[{transform: 'scale(1)'},{transform: 'scale(0)'}],
{duration:200}
);
*/
document.addEventListener('click', function(){
cursor1.classList.add("cursoranimation");
});
--//
document.addEventListener('mousemove', function(e){
cursor1.style.cssText = cursor2.style.cssText = "left: " + e.clientX + "px; top: " + e.clientY + "px;";
});
//-les styles sont dans ../Pages/Scss/Base/_undefined.cursoranimation{
transform: scale(1);
transform: translate(-50%,-50%);
animation: cursoranimation2 1000ms backwards;
}
.cursor1{
position:fixed;
width: 70px;
height: 70px;
border:1px solid black;
border-radius:50%;
left:0;
top:0;
pointer-events:none;
transform: translate(-50%, -50%);
z-index: 1;
}
.cursor2{
position:fixed;
width: 8px;
height: 8px;
background-color:#c6c6c6;
border-radius:50%;
left:0;
top:0;
pointer-events:none;
transform: translate(-50%, -50%);
z-index: 1;
}
@keyframes cursoranimation2 {
0% {
background-color: white;
transform: scale(1);
transform:translate(-15%,-15%);
}
50% {
background-color: rgb(179, 247, 202);
transform:scale(0.6);
transform:translate(-25%,-25%);
}
75% {
background-color: rgb(179, 247, 202);
transform:scale(0.4);
transform:translate(-35%,-35%);
}
100% {
background-color: rgb(132, 247, 176);
transform:scale(0.3);
transform:translate(-50%,-50%);
}
}Do you have some advice for my situation ? Thank you ! (i'm not using jquery)