Spaces:
Build error
Build error
| <html lang="vi"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Cinematic Logo Wipe Transition</title> | |
| <style> | |
| /* Reset cơ bản */ | |
| body, html { | |
| margin: 0; | |
| padding: 0; | |
| width: 100%; | |
| height: 100%; | |
| overflow-x: hidden; /* Ngăn scroll ngang */ | |
| font-family: sans-serif; | |
| } | |
| /* Lớp nội dung bên dưới (Underlying footage) */ | |
| .footage { | |
| width: 100vw; | |
| height: 100vh; | |
| background: url('https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .footage button { | |
| padding: 15px 30px; | |
| font-size: 18px; | |
| cursor: pointer; | |
| border: none; | |
| background-color: #333; | |
| color: white; | |
| border-radius: 5px; | |
| z-index: 10; | |
| } | |
| /* --- PHẦN CORE CHO HIỆU ỨNG WIPE --- */ | |
| .wipe-transition { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100vw; | |
| height: 100vh; | |
| background-color: #ACE7FF; /* Màu xanh pastel theo yêu cầu */ | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 9999; /* Đảm bảo nằm trên cùng */ | |
| /* Trạng thái ban đầu: Nằm ngoài màn hình bên trái */ | |
| transform: translateX(-100%); | |
| /* Smooth cinematic ease: Sử dụng cubic-bezier để có cảm giác chậm - nhanh - chậm */ | |
| transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1); | |
| } | |
| /* Trạng thái 1: Trượt vào giữa màn hình */ | |
| .wipe-transition.slide-in { | |
| transform: translateX(0); | |
| } | |
| /* Trạng thái 2: Trượt ra khỏi màn hình sang phải */ | |
| .wipe-transition.slide-out { | |
| transform: translateX(100%); | |
| } | |
| /* Logo trắng ở giữa */ | |
| .logo { | |
| color: white; | |
| font-size: 3rem; | |
| font-weight: bold; | |
| letter-spacing: 5px; | |
| text-transform: uppercase; | |
| /* Thêm hiệu ứng mờ nhẹ cho logo để trông cinematic hơn */ | |
| opacity: 0; | |
| transform: scale(0.9); | |
| transition: all 0.8s ease-out; | |
| } | |
| /* Hiện logo khi nền đã trượt vào */ | |
| .wipe-transition.slide-in .logo { | |
| opacity: 1; | |
| transform: scale(1); | |
| transition-delay: 0.4s; /* Chờ nền xanh vào một chút rồi mới hiện */ | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Nội dung chính của trang web --> | |
| <div class="footage"> | |
| <button id="triggerBtn">Chạy Hiệu Ứng (Run Transition)</button> | |
| </div> | |
| <!-- Khối chuyển cảnh --> | |
| <div class="wipe-transition" id="wipeOverlay"> | |
| <!-- Có thể thay bằng thẻ <img> chứa logo trắng --> | |
| <div class="logo">YOUR LOGO</div> | |
| </div> | |
| <script> | |
| const btn = document.getElementById('triggerBtn'); | |
| const wipe = document.getElementById('wipeOverlay'); | |
| btn.addEventListener('click', () => { | |
| // BƯỚC 1: Reset lại vị trí ban đầu (phòng trường hợp click nhiều lần) | |
| wipe.classList.remove('slide-out'); | |
| wipe.classList.remove('slide-in'); | |
| // Xóa transition tạm thời để đưa div về bên trái mà không bị lộ | |
| wipe.style.transition = 'none'; | |
| wipe.style.transform = 'translateX(-100%)'; | |
| // Dùng setTimeout nhỏ để trình duyệt cập nhật DOM trước khi bật lại transition | |
| requestAnimationFrame(() => { | |
| requestAnimationFrame(() => { | |
| // Bật lại transition | |
| wipe.style.transition = 'transform 1.2s cubic-bezier(0.77, 0, 0.175, 1)'; | |
| // BƯỚC 2: Trượt từ trái vào giữa | |
| wipe.classList.add('slide-in'); | |
| // BƯỚC 3: Giữ trên màn hình một lúc rồi trượt sang phải | |
| setTimeout(() => { | |
| wipe.classList.remove('slide-in'); // Gỡ class ở giữa | |
| wipe.classList.add('slide-out'); // Thêm class chạy sang phải | |
| }, 2500); // 2.5 giây (Bao gồm thời gian trượt vào 1.2s + thời gian đứng yên xem logo 1.3s) | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |