/** * Hiện dần khi cuộn tới — dùng chung toàn site. * Nguồn: khối `.ys-fadeup1` của silkroadluxurytrains.com (chủ dự án gửi CSS gốc). * * @keyframes ysfadeInUp { 0% { opacity:0; transform: translate3d(0,60px,0) } * 100% { opacity:1; transform: none } } * .ys-fadeup1 { animation: ysfadeInUp .8s ease-in-out both; animation-delay: .2s } * * Bản gốc dùng hiệu ứng KHÁC (tách từng chữ cái) cho eyebrow và tiêu đề. Chủ dự án chốt * bỏ phần đó, cho tiêu đề dùng chung hiệu ứng với mô tả — nhờ vậy không phải tách DOM * của tiêu đề (mà tiêu đề của site gần như cái nào cũng có và
* bên trong), cũng không phải xử lý phần trình đọc màn hình đọc rời từng ký tự. * * `opacity: 0` CHỈ áp khi có class `js` — class này do một đoạn script nhỏ trong * gắn vào. Tắt JS thì không khối nào bị ẩn, chữ hiện bình thường. */ @keyframes sj-reveal-up { from { opacity: 0; transform: translate3d(0, 60px, 0); } to { opacity: 1; transform: none; } } .js .sj-reveal { opacity: 0; } .js .sj-reveal.is-inview { animation: sj-reveal-up .8s ease-in-out .2s both; } /* Trình duyệt có IntersectionObserver nhưng JS lỗi giữa chừng thì khối vẫn kẹt ở opacity 0. Mốc an toàn: sau 3s kể từ khi tải, mọi khối chưa được đánh dấu sẽ tự hiện (xem `reveal.js` — gắn `sj-reveal-done` vào ). */ .js.sj-reveal-done .sj-reveal:not(.is-inview) { opacity: 1; } @media (prefers-reduced-motion: reduce) { .js .sj-reveal { opacity: 1; } .js .sj-reveal.is-inview { animation: none; } }