Mouse Effect06

// const word = document.querySelector(".word");
// const shadow = e =>{
    // const { x, y } = e;
    // const rect =word.getBoundingClientRect(); 
    // //console.log(rect);
    // const mouseX =( x - rect.left - rect.width/2) / 30;
    // const mouseY =( y - rect.top - rect.height/2) / 30 ;

    // word.style.textShadow= `${mouseX}px ${-mouseY}px 0px rgba(131, 149, 189, 0.5),
    //                         ${-mouseX}px ${mouseY}px 0px rgba(54, 117, 255, 0.6),
    //                         ${mouseY}px ${-mouseX}px 0px rgba(80, 122, 212, 0.7),
    //                         ${-mouseY}px ${mouseX}px 0px rgba(143, 177, 250, 0.8)`;
    
//     // text-shadow:
//     //  10px 10px 0 rgba(131, 149, 189, 0.5),
//     //  10px -10px 0 rgba(54, 117, 255, 0.6),
//     //  -10px 10px 0 rgba(80, 122, 212, 0.7),
//     //  -10px -10px 0 rgba(143, 177, 250, 0.8);

// }
    

// window.addEventListener("mousemove",shadow)




window.addEventListener("mousemove",function(e){
    document.querySelectorAll(".word").forEach(elem =>{
        const { x, y } = e;
    const rect =elem.getBoundingClientRect(); 
    //console.log(rect);
    const mouseX =( x - rect.left - rect.width/2) / 30;
    const mouseY =( y - rect.top - rect.height/2) / 30 ;

    elem.style.textShadow= `${mouseX}px ${-mouseY}px 0px rgba(131, 149, 189, 0.5),
                            ${-mouseX}px ${mouseY}px 0px rgba(54, 117, 255, 0.6),
                            ${mouseY}px ${-mouseX}px 0px rgba(80, 122, 212, 0.7),
                            ${-mouseY}px ${mouseX}px 0px rgba(143, 177, 250, 0.8)`;
    })
});