Botón proximidad con JavaScript y CSS3

Vista prévia

Descripción

Toastinette es un plugin de notificación JavaScript muy pequeño para mostrar los mensajes del brindis inspirados en material Design en la Página Web.

Funcionamiento

Toastinette es un plugin de notificación JavaScript muy pequeño para mostrar los mensajes del brindis inspirados en material Design en la Página Web.

<a id="b1" class="proxim-button">CSS</a>
<a id="b2" class="proxim-button">SCRIPT</a>
<a id="b3" class="proxim-button">.COM</a>

Toastinette es un plugin de notificación JavaScript muy pequeño para mostrar los mensajes del brindis inspirados en material Design en la Página Web.

const proximityManager = new ProximityManager();

window.addEventListener( "mousemove", function( e ) {


let proxims = document.getElementsByClassName( "proxim-button" );



Array.prototype.forEach.call( proxims, function( proxim ) {




proximityManager.effect( proxim, {






x: e.x,






y: e.y




} );


} );
} );

function ProximityManager() {


this.color = "rgba( 255, 255, 255, 0.3 )";


this.radius = 80;
}

ProximityManager.prototype.effect = function( proxim, pos ) {


let rect = proxim.getBoundingClientRect();


let x = pos.x - rect.left; // offset from corner


let y = pos.y - rect.top;



proxim.style.background = "radial-gradient( circle at " + x + "px " + y + "px, " + this.color + " 0%, transparent " + this.radius + "px)";
}