Paraíso Para Los Diseñadores Y Desarrolladores

Detecta cuando un mouse sale de la ventana con Glio.js

¿Cuántas veces cierra una pestaña y observa una ventana modal que le pide que se quede ? Esto parece un lugar común hoy en día y se hace por una razón: ¡funciona!

Puede generar un efecto similar utilizando la biblioteca Glio.js. Es una secuencia de comandos JS de fuente abierta para detectar cuándo el cursor del mouse del usuario se acerca al borde o cuando sale de la ventana del navegador .

Esto se puede usar para tratar de mantener a los visitantes en su sitio . Pero también se puede usar para crear efectos dinámicos si el mouse del usuario va muy lejos a un lado de la pantalla.

Encontrará muchos de estos scripts de intención de salida en toda la web y la mayoría de ellos son difíciles de personalizar . Pero eso es lo que hace que Glio.js sea tan genial.

Es una poderosa biblioteca que le da control sobre lo que hace con la pantalla. Si el mouse de su usuario sale del navegador, puede mostrar un modal, o cambiar el color de fondo, o no hacer absolutamente nada .

También viene con puntos calientes integrados que puedes verificar cada vez que el mouse del usuario se acerca a cualquiera de las cuatro esquinas de la pantalla. También puede definir el método de devolución de llamada y qué tan cerca debe estar el cursor antes de ejecutar cualquier cosa.

Para usar Glio, simplemente descargue una copia de GitHub y hágalo instalar. También puede obtener una copia de Bower, npm o directamente de un CDN .

Con el script en su página, simplemente agregue esta línea de código (personalizada con sus opciones):

 glio.init ([dirección, devolución de llamada]);

La opción de direction puede ser cualquier esquina (por ejemplo, "arriba a la izquierda") o "arriba", que representa la parte superior de la pantalla. Su función de devolución de llamada es cualquier código JS que desee ejecutar cuando el mouse del usuario se acerca demasiado. Otra opción le permite definir la distancia desde el punto de dirección, puede encontrar la información relacionada en GitHub.

Por lo tanto, si busca un script simple para detectar el intento de salida, Glio es un recurso imprescindible.

Cómo crear forma de corazón con CSS

CSS3 eleva la viabilidad de lo que podemos construir en sitios web utilizando solo HTML y CSS. Puede encontrar ejemplos sorprendentes que hemos presentado anteriormente. Pero no nos adelantemos demasiado, un diseño complicado necesitará códigos que puedan causarle dolor de cabeza.En cambio, vamos a crear algo simple para ayudarlo a comprender las formas y el posicionamiento con CSS primero, antes de aventurarse a diseños más avanzados. Com

(Consejos de tecnología y diseño)

Crea hermoso