Scripts que hacen tu web más suave y compacta.
Una sensación que está en los pequeños detalles.
La optimización de una web no solo se trata de velocidad y estructura, sino también de la sensación que transmite al navegar. Pequeños ajustes pueden hacer que una web se sienta más fluida, ligera y de valor.
Aquí tienes tres scripts esenciales para mejorar la experiencia visual y de interacción de cualquier web.
1 — Mejora la renderización de los textos
Las fuentes pueden afectar la percepción de nitidez y calidad de una web. Este código hará que el texto se vea más nítido y profesional en todos los navegadores.
¿Te suena eso de pasar de Figma a web un texto con el mismo tamaño y peso de tipografía, pero se ve más grueso en la web que en tu proyecto de Figma? Pues este script también solucionará eso.
<style>
body {
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
</style>Para integrarlo, simplemente añádelo a los estilos CSS de tu web.
2 — Scroll suave
Un desplazamiento fluido hace que la navegación se sienta más agradable, y da aspecto de un buen acabado. Además, las animaciones de tipo scroll que tengan en tu web lo van a agradecer visualmente.
Este script es uno de los más conocidos y probados, no afecta al rendimiento, y no tendrás conflictos con otras interacciones.
<script>
const lenis = new Lenis({
autoRaf: true,
});
</script>Para integrarlo, simplemente pega el script antes del cierre del </body>, y añade las siguientes lineas al <head> de tu web para cargar el script.
<link rel="stylesheet" href="https://unpkg.com/lenis@1.1.20/dist/lenis.css">
<script src="https://unpkg.com/lenis@1.1.20/dist/lenis.min.js"></script>
3 — Bloquea la selección de texto
Un recurso que da mucha consistencia y solidez a tu web, bien sea para evitar que tus usuarios copien contenido de tu web, o simplemente por estética de no permitir esas selecciones.
Simplemente pégalo en el CSS de tu web.
<style>
* {
user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>