/* ========================================== Cấu hình biến và Transition LUÔN hiển thị (Không ẩn ở đây - chỉ ẩn khi JS đã chạy) ========================================== */ .anim-item { /* Biến cấu hình mặc định */ --anim-duration: 700ms; --anim-delay: 0ms; --anim-easing: cubic-bezier(.22, .61, .36, 1); --anim-distance: 30px; backface-visibility: hidden; } /* ========================================== Trạng thái ẨN ban đầu: CHỈ áp dụng khi JavaScript đã chạy thành công (JS thêm class "eam-js" vào thẻ ) Nếu JS bị chặn/lỗi → phần tử vẫn hiển thị bình thường ========================================== */ .eam-js .anim-item { will-change: opacity, transform, filter, clip-path; } .eam-js .anim-item:not(.anim-active) { opacity: 0; transform: translate3d( var(--anim-translate-x, 0px), var(--anim-translate-y, 0px), 0 ) scale(var(--anim-scale, 1)) rotate(var(--anim-rotate, 0deg)); filter: blur(var(--anim-blur, 0px)); } /* ========================================== Trạng thái HIỂN THỊ khi cuộn tới (JS gắn class .anim-active vào phần tử) ========================================== */ .eam-js .anim-item.anim-active { opacity: 1; transform: translate3d(0px, 0px, 0) scale(1) rotate(0deg); filter: blur(0px); clip-path: inset(0 0 0 0) !important; /* Thiết lập transition khi kích hoạt */ transition-property: opacity, transform, filter, clip-path; transition-duration: var(--anim-duration); transition-delay: var(--anim-delay); transition-timing-function: var(--anim-easing); } /* ========================================== Các hiệu ứng Hoạt ảnh (Animation Presets) Định nghĩa trạng thái ban đầu qua biến CSS ========================================== */ /* Fade chỉ hiện dần tại chỗ (không di chuyển) */ /* .anim-fade không cần khai báo thêm, mặc định là opacity 0 → 1 */ .anim-fade { /* inherit - Hiện dần tại chỗ */ } /* Fade + Di chuyển */ .anim-fade-up { --anim-translate-y: var(--anim-distance); } .anim-fade-down { --anim-translate-y: calc(var(--anim-distance) * -1); } .anim-fade-left { --anim-translate-x: var(--anim-distance); } .anim-fade-right { --anim-translate-x: calc(var(--anim-distance) * -1); } /* Slide (Di chuyển xa hơn Fade) */ .anim-slide-up { --anim-translate-y: 60px; } .anim-slide-down { --anim-translate-y: -60px; } .anim-slide-left { --anim-translate-x: 60px; } .anim-slide-right { --anim-translate-x: -60px; } /* Zoom */ .anim-zoom-in { --anim-scale: 0.85; } .anim-zoom-out { --anim-scale: 1.15; } /* Rotate & Scale */ .anim-rotate-l { --anim-rotate: -12deg; --anim-scale: 0.95; } .anim-rotate-r { --anim-rotate: 12deg; --anim-scale: 0.95; } .anim-scale { --anim-scale: 0.9; } /* Blur In */ .anim-blur-in { --anim-blur: 10px; --anim-translate-y: 10px; } /* ========================================== Clip-path Reveals ========================================== */ .anim-reveal { overflow: clip; } .eam-js .anim-item.anim-reveal:not(.anim-active) { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); } .anim-text-reveal { overflow: clip; } .eam-js .anim-item.anim-text-reveal:not(.anim-active) { opacity: 1; transform: translate3d(0, 0.5em, 0); clip-path: inset(0 0 100% 0); } /* ========================================== Tiện ích Tốc độ (Duration Utilities) ========================================== */ .duration-100 { --anim-duration: 100ms; } .duration-200 { --anim-duration: 200ms; } .duration-300 { --anim-duration: 300ms; } .duration-400 { --anim-duration: 400ms; } .duration-500 { --anim-duration: 500ms; } .duration-600 { --anim-duration: 600ms; } .duration-700 { --anim-duration: 700ms; } .duration-800 { --anim-duration: 800ms; } .duration-900 { --anim-duration: 900ms; } .duration-1000 { --anim-duration: 1000ms; } .duration-1200 { --anim-duration: 1200ms; } .duration-1500 { --anim-duration: 1500ms; } .duration-2000 { --anim-duration: 2000ms; } .duration-3000 { --anim-duration: 3000ms; } /* ========================================== Tiện ích Độ trễ (Delay Utilities) ========================================== */ .delay-100 { --anim-delay: 100ms; } .delay-200 { --anim-delay: 200ms; } .delay-300 { --anim-delay: 300ms; } .delay-400 { --anim-delay: 400ms; } .delay-500 { --anim-delay: 500ms; } .delay-600 { --anim-delay: 600ms; } .delay-700 { --anim-delay: 700ms; } .delay-800 { --anim-delay: 800ms; } .delay-900 { --anim-delay: 900ms; } .delay-1000 { --anim-delay: 1000ms; } .delay-1200 { --anim-delay: 1200ms; } .delay-1500 { --anim-delay: 1500ms; } .delay-2000 { --anim-delay: 2000ms; } /* ========================================== Tiện ích Easing (Timing Functions) ========================================== */ .ease-default { --anim-easing: cubic-bezier(.22, .61, .36, 1); } .ease-in { --anim-easing: cubic-bezier(.55, .055, .675, .19); } .ease-out { --anim-easing: cubic-bezier(.215, .61, .355, 1); } .ease-in-out { --anim-easing: cubic-bezier(.645, .045, .355, 1); } .ease-linear { --anim-easing: linear; } /* ========================================== Hiệu ứng chữ Split Text ========================================== */ .eam-split-segment { display: inline-block; white-space: pre-wrap; } .eam-split-ready .eam-split-segment { will-change: opacity, transform, filter; } .eam-js .anim-active.eam-split-ready .eam-split-segment { transition-property: opacity, transform, filter; transition-duration: var(--anim-duration); transition-delay: calc(var(--anim-delay) + var(--eam-segment-delay, 0ms)); transition-timing-function: var(--anim-easing); } .eam-js .anim-split-words.eam-split-ready:not(.anim-active) .eam-split-segment { opacity: 0; transform: translate3d(0, 0.6em, 0); } .eam-js .anim-split-chars.eam-split-ready:not(.anim-active) .eam-split-segment { opacity: 0; transform: translate3d(0, 0.8em, 0) rotate(2deg); } /* ========================================== Hỗ trợ Tiếp cận (Accessibility / Reduced motion) ========================================== */ @media (prefers-reduced-motion: reduce) { .eam-js .anim-item, .eam-js .anim-item:not(.anim-active) { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: inset(0 0 0 0) !important; transition: none !important; } .eam-split-ready .eam-split-segment { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } }