Chữ co giãn theo chuột
Chữ gần chuột thì đậm và rộng ra. Dùng variable font, không tải thêm gì.
Đang tải demo…
Cách hoạt động
- 1.Variable font chỉnh được độ đậm (wght) và độ rộng (wdth) liên tục. Ở đây dùng Bricolage Grotesque.
- 2.Mỗi chữ đọc hai biến CSS --w và --d. GSAP tween thẳng hai biến này.
- 3.quickTo tạo sẵn hàm cho từng chữ. Chuột di tới đâu chỉ gọi hàm, không tạo tween mới mỗi frame.
Code chính
const letters = gsap.utils.toArray("[data-letter]");
const setters = letters.map((el) => ({
el,
w: gsap.quickTo(el, "--w", { duration: 0.6, ease: "power3" }),
d: gsap.quickTo(el, "--d", { duration: 0.6, ease: "power3" }),
}));
root.addEventListener("pointermove", (e) => {
for (const { el, w, d } of setters) {
const r = el.getBoundingClientRect();
const dist = Math.abs(e.clientX - (r.left + r.width / 2));
const t = gsap.utils.clamp(0, 1, 1 - dist / 420);
w(gsap.utils.interpolate(450, 800, t));
d(gsap.utils.interpolate(75, 100, t));
}
});
/* CSS */
[data-letter] {
font-variation-settings: "wght" var(--w), "wdth" var(--d);
}