Efecto de sombra de texto interactivo con JavaScript y CSS3

Vista prévia

Descripción

Un efecto de sombra de texto elegante, interactivo y con sentido de dirección que reacciona al movimiento del ratón. Creado con la transición pura de JavaScript y CSS & propiedades de sombra de texto.

Funcionamiento

Cree el texto al que desea aplicar el efecto de sombra interactiva.

<h1 class="demo">

<p>WikiCSS</p>

WikiCSS
</h1>

Las reglas CSS para el efecto de sombra de texto.

.demo {

--x-shadow: 0;

--y-shadow: 0;

--x:50%;

--y:50%;

font-size: 15rem;

transition: all 0.2s ease;

position: relative;

padding: 2rem;
}

.demo:hover {

transition: all 0.2s ease;

text-shadow: var(--x-shadow) var(--y-shadow) 10px #1A1A1A;
}

.demo p {

position: absolute;

top: 2rem;

left: 2rem;

background-image: radial-gradient(circle closest-side, rgba(255, 255, 255, 0.05), transparent);

background-position: var(--x) var(--y);

background-repeat: no-repeat;

text-shadow: none;

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

transition: all 0.1s ease;
}

El principal JavaScript para hacer el efecto de sombra de texto interactivo y de dirección.

const title = document.querySelector('.demo')

// light
document.onmousemove = function(e) {

let x = e.pageX - window.innerWidth/2;

let y = e.pageY - window.innerHeight/2;



title.style.setProperty('--x', x + 'px')

title.style.setProperty('--y', y + 'px')
}

// shadow
title.onmousemove = function(e) {

let x = e.pageX - window.innerWidth/2;

let y = e.pageY - window.innerHeight/2;


let rad = Math.atan2(y, x).toFixed(2);

 let length = Math.round(Math.sqrt((Math.pow(x,2))+(Math.pow(y,2)))/10);


 let x_shadow = Math.round(length * Math.cos(rad));

let y_shadow = Math.round(length * Math.sin(rad));


title.style.setProperty('--x-shadow', - x_shadow + 'px')

title.style.setProperty('--y-shadow', - y_shadow + 'px')

}