/* --------------------------------------------------------------------------- Hiệu ứng xuất hiện khi cuộn tới. Thay cho WOW.js + animate.css của website cũ: bộ đó dịch chuyển phần tử đúng 100% chiều cao của chính nó, với thẻ sản phẩm cao 400px thì nó nhảy nguyên một màn hình - vừa chóng mặt vừa làm trang giật. Ở đây quãng dịch cố định và ngắn, đủ thấy là có chuyển động chứ không cướp sự chú ý khỏi nội dung. Phần tử chỉ bị ẩn khi JavaScript chạy được (thẻ có lớp `nv-js`). Tắt JavaScript hay script lỗi thì mọi thứ hiện bình thường, không bao giờ có chuyện nội dung biến mất. --------------------------------------------------------------------------- */ :root { --nv-reveal-time: .65s; --nv-reveal-shift: 26px; --nv-reveal-ease: cubic-bezier(.22, .61, .36, 1); } .nv-js .nv-reveal { opacity: 0; transform: translateY(var(--nv-reveal-shift)); transition: opacity var(--nv-reveal-time) var(--nv-reveal-ease), transform var(--nv-reveal-time) var(--nv-reveal-ease); transition-delay: var(--nv-reveal-delay, 0s); will-change: opacity, transform; } /* Phần tử chờ hiện từ bên phải bị đẩy ra ngoài mép phải màn hình, sinh thanh cuộn ngang cho tới lúc nó hiện ra - trên điện thoại rất dễ thấy. Cắt phần thừa ở body. Dùng `clip` chứ không phải `hidden`: hidden biến body thành khung cuộn, làm hỏng position: sticky của các phần tử bên trong. Trình duyệt cũ không hiểu clip thì rơi về hidden ở dòng trên - thanh điều hướng dính dùng position: fixed nên không ảnh hưởng. */ html, body { overflow-x: hidden; overflow-x: clip; } .nv-js .nv-reveal--left { transform: translateX(calc(var(--nv-reveal-shift) * -1.6)); } .nv-js .nv-reveal--right { transform: translateX(calc(var(--nv-reveal-shift) * 1.6)); } .nv-js .nv-reveal--zoom { transform: scale(.94); } .nv-js .nv-reveal--fade { transform: none; } .nv-js .nv-reveal.is-visible { opacity: 1; transform: none; } /* Xong việc thì trả lại cho trình duyệt, không giữ layer vẽ vô ích. */ .nv-js .nv-reveal.is-visible { will-change: auto; } /* * Người dùng bật chế độ giảm chuyển động của hệ điều hành thì bỏ hẳn hiệu ứng - * hiện thẳng, không dịch chuyển. Với người say chuyển động, hiệu ứng trượt là * thứ gây khó chịu thật sự chứ không phải chuyện thẩm mỹ. */ @media (prefers-reduced-motion: reduce) { .nv-js .nv-reveal, .nv-js .nv-reveal--left, .nv-js .nv-reveal--right, .nv-js .nv-reveal--zoom { opacity: 1; transform: none; transition: none; } }