/** * Hiệu ứng dùng chung cho toàn site. * * Trước file này mỗi trang tự nghĩ ra hiệu ứng riêng: đếm được 29 mốc thời * gian từ 90ms tới 1,4s, tám đường cong, năm quãng nhấc thẻ và ba mức phóng * ảnh. Nặng hơn cả là hai cơ chế hiện dần khi cuộn khác hẳn nhau — trang xưởng * sản xuất dùng thuộc tính `data-ak-vao` với lớp `da-hien`, trang giới thiệu * dùng lớp `is-show` — còn 18 trang còn lại thì không có gì. Cuộn từ trang này * sang trang kia thấy rõ là hai người làm. * * Nay thời gian và đường cong lấy từ `tokens.css`, còn cơ chế hiện dần gom về * đúng một bộ ở đây, chạy trên mọi trang. * * Cách dùng: gắn `data-ak-vao` vào khối muốn hiện dần. * * data-ak-vao="len" trồi lên, mặc định * data-ak-vao="trai" trượt vào từ trái * data-ak-vao="phai" trượt vào từ phải * data-ak-vao="luoi" cha hiện trước, các con nối đuôi nhau vào sau * * Trang nào không gắn gì thì `assets/js/hieu-ung.js` tự gắn `len` cho các * `
` nằm dưới nếp gấp. Khối nằm trong khung hình đầu tiên không bao * giờ bị ẩn — mở trang ra mà nội dung phải chờ mới hiện là hỏng. * * Lớp `ak-hieu-ung-js` do JavaScript gắn vào `` ngay đầu trang. Tắt * JavaScript là mọi khối hiện đủ ngay, không có gì bị ẩn vĩnh viễn. * * Bật giảm chuyển động trong hệ điều hành thì tắt sạch, xem khối cuối file. * * @package Flatsome\Child */ /* ------------------------------------------------------------------------- * Khối hiện dần khi cuộn tới * ---------------------------------------------------------------------- */ /* * Mọi quy tắc dưới đây đều kèm `:not(.ak-vao-xong)`. * * Lý do: hiệu ứng vào chạy 0,7s, còn rê chuột lên thẻ chạy 0,25s. Nếu để quy * tắc của hiệu ứng vào bám lại sau khi khối đã hiện xong thì nó vẫn đè lên * `transition` của thẻ, và cùng một cái thẻ ở trang có lưới sẽ nhấc lên chậm * gần gấp ba lần cái thẻ y hệt ở trang không có lưới. Đúng thứ đang phải dọn. * * Lớp `ak-vao-xong` do `hieu-ung.js` gắn khi khối chạy xong, từ lúc đó lớp * dùng chung buông hẳn khối ra, trả nó về đúng `transition` của trang. */ .ak-hieu-ung-js [data-ak-vao]:not(.ak-vao-xong) { opacity: 0; transition: opacity var(--ak-chuyen-vao), transform var(--ak-chuyen-vao); will-change: opacity, transform; } .ak-hieu-ung-js [data-ak-vao="len"]:not(.ak-vao-xong), .ak-hieu-ung-js [data-ak-vao="luoi"]:not(.ak-vao-xong), .ak-hieu-ung-js [data-ak-vao=""]:not(.ak-vao-xong) { transform: translateY(var(--ak-vao-xa)); } .ak-hieu-ung-js [data-ak-vao="trai"]:not(.ak-vao-xong) { transform: translateX(calc(var(--ak-vao-ngang) * -1)); } .ak-hieu-ung-js [data-ak-vao="phai"]:not(.ak-vao-xong) { transform: translateX(var(--ak-vao-ngang)); } [data-ak-vao].da-hien:not(.ak-vao-xong) { opacity: 1; transform: none; will-change: auto; } /* * Lưới: cha hiện trước, các con nối đuôi nhau vào sau. Chỉ trễ tới con thứ sáu * rồi thôi — lưới mười hai ô mà đợi tới ô cuối là hơn một giây, người dùng * cuộn qua mất rồi. */ .ak-hieu-ung-js [data-ak-vao="luoi"]:not(.ak-vao-xong) > * { opacity: 0; transform: translateY(var(--ak-vao-xa)); transition: opacity var(--ak-chuyen-vao), transform var(--ak-chuyen-vao); } [data-ak-vao="luoi"].da-hien:not(.ak-vao-xong) > * { opacity: 1; transform: none; } [data-ak-vao="luoi"].da-hien:not(.ak-vao-xong) > :nth-child(2) { transition-delay: var(--ak-vao-tre); } [data-ak-vao="luoi"].da-hien:not(.ak-vao-xong) > :nth-child(3) { transition-delay: calc(var(--ak-vao-tre) * 2); } [data-ak-vao="luoi"].da-hien:not(.ak-vao-xong) > :nth-child(4) { transition-delay: calc(var(--ak-vao-tre) * 3); } [data-ak-vao="luoi"].da-hien:not(.ak-vao-xong) > :nth-child(5) { transition-delay: calc(var(--ak-vao-tre) * 4); } [data-ak-vao="luoi"].da-hien:not(.ak-vao-xong) > :nth-child(n+6) { transition-delay: calc(var(--ak-vao-tre) * 5); } /* * Màn hẹp thì hai kiểu trượt ngang chuyển thành trồi lên. Trượt ngang ở khổ * hẹp làm nội dung thò ra ngoài mép phải và sinh thanh cuộn ngang. */ @media (max-width: 849px) { .ak-hieu-ung-js [data-ak-vao="trai"], .ak-hieu-ung-js [data-ak-vao="phai"] { transform: translateY(var(--ak-vao-xa)); } } /* ------------------------------------------------------------------------- * Giảm chuyển động * * Người dùng bật giảm chuyển động trong hệ điều hành thì tắt hết, kể cả hiệu * ứng của Flatsome và của plugin. Đặt ở đây một lần thay cho tám khối rải rác * trong CSS từng trang. Không dùng `0s` mà dùng `0.01ms` vì có trình duyệt bỏ * qua sự kiện `transitionend` khi thời gian bằng không, làm kẹt vài đoạn mã * chờ sự kiện đó. * ---------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } /* Ẩn để chờ cuộn thì không còn nghĩa gì nữa: trả nội dung ra ngay. */ [data-ak-vao], [data-ak-vao="luoi"] > * { opacity: 1 !important; transform: none !important; } /* * Hiệu ứng riêng của trang giới thiệu, dựng theo bản mẫu An Cường: chữ * chạy lên từng từ, khối trượt lên, ảnh lộ dần theo `clip-path`. Trả cả ba * về đúng vị trí và đúng khung ảnh. */ .ak-gt-ani, .ak-gt-inner .ak-gt-w > span { opacity: 1 !important; transform: none !important; } .ak-gt-clip img { clip-path: none !important; transform: none !important; } /* * Rê chuột thì đổi màu là đủ. Nhấc thẻ lên hay phóng ảnh to ra vẫn là * chuyển động, mà đây đúng là thứ người dùng vừa yêu cầu bỏ. */ a:hover, a:focus-visible, button:hover, button:focus-visible, [class*="-the"]:hover, [class*="-the"]:hover img, [class*="__the"]:hover, [class*="__the"]:hover img, [class*="-anh"]:hover img, [class*="__anh"]:hover img { transform: none !important; } }