Nada sobre Adam es un secreto. Accesorios. hermano nos lo dio Accesorios abiertos No hace mucho, conocimos un conjunto de variables preconfiguradas de color, sombra, tamaño, tipografía y más. Ahora está de vuelta con Prop For That, una idea similar pero apasionante en el sentido de que crea vivir Los elementos basados en accesorios CSS normalmente no son visibles en los navegadores. Cosas como la posición del cursor, el valor de progreso, cierto estado del formulario, la hora actual, la velocidad de desplazamiento, ya sabes, cosas que JavaScript detecta y pasa a CSS.
Tengo entendido que todo el material de secuencias de comandos ya está en segundo plano. Todo lo que necesitas hacer es importar la biblioteca, declararla en HTML y aplicarle estilo en CSS.
Este era Chris hace mucho tiempo. Propiedades personalizadas registradas en JavaScript para rastrear la posición del cursor:
Prop For That cubre esto muy bien. La diferencia es que estamos usando la propiedad de datos activados. guion:
<div class="mover" data-props-for="pointer">...</div>Y pon los accesorios relevantes en el estilo:
.mover {
aspect-ratio: 1;
width: 50px;
background: red;
position: absolute;
left: calc(var(--live-pointer-x, 0) * 1px);
top: calc(var(--live-pointer-y, 0) * 1px);
}La demostración está ahí. Vaya, ¿podría Adam hacer un buen trabajo?
Enlace directo →
