Hướng Dẫn Làm Hiệu Ứng Lồng Đèn Trung Thu

Trung Thu là dịp để chúng ta quây quần bên gia đình, thưởng thức bánh, ngắm trăng và không thể thiếu những chiếc lồng đèn lung linh. Để mang không khí Trung Thu vào website, trong bài viết này Da I Kin sẽ hướng dẫn bạn cách tạo hiệu ứng lồng đèn Trung Thu đơn giản nhưng cực kỳ ý nghĩa. Để tạo hiệu ứng này, chúng ta sẽ dùng HTML, CSS và JavaScript. Khi người dùng click vào lồng đèn, nó sẽ phát sáng và lung linh như ngoài đời thực. Dưới đây là cách làm hiệu ứng lồng đèn Trung Thu.

Thêm khung và hình ảnh lồng đèn với HTML

Phần mã HTML này dùng để tạo ra các yếu tố cơ bản nhất sẽ hiển thị trên trang web của bạn. Nó giống như việc xây dựng bộ khung cho một ngôi nhà.

<h1> và <p>: Dùng để tạo tiêu đề “Website Chào Mừng Trung Thu” và một dòng văn bản hướng dẫn người dùng.
<div class="lantern-container">: Là một “hộp” vô hình dùng để chứa hai chiếc đèn lồng, giúp việc quản lý chúng dễ dàng hơn.
<img ...>: Đây là thẻ để chèn hình ảnh. Chúng ta có hai chiếc đèn lồng (lantern1 và lantern2) được thêm vào trang web thông qua thẻ này. Thuộc tính class được đặt để chúng ta có thể trang trí và lập trình cho chúng ở các bước sau.

<h1>Website Chào Mừng Trung Thu</h1>
<p>Click vào những chiếc đèn lồng ở góc trên bên phải để xem điều kỳ diệu nhé!</p>
<div class="lantern-container">
  <img src="long-den.png" alt="Đèn lồng đỏ" class="lantern1" 
  <img src="long-den.png" alt="Đèn lồng đỏ" class="lantern2"
</div>

Thêm hiệu ứng đung đưa và phát sáng với CSS

Sau khi có khung, CSS sẽ “tô điểm” và “thổi hồn” vào các yếu tố HTML, giúp chúng trở nên sống động và đẹp mắt hơn.

.lantern1, .lantern2: Đoạn này định dạng chung cho cả hai đèn lồng.
- position: fixed;: Giúp đèn lồng “dính” cố định vào góc màn hình, kể cả khi bạn cuộn trang.
- transform-origin: top center;: Thiết lập điểm xoay của đèn lồng ở chính giữa-trên cùng, giúp hiệu ứng đung đưa trông tự nhiên như được treo từ trên xuống.
- animation: sway 4s ease-in-out infinite;: Áp dụng hiệu ứng sway (đung đưa) lặp đi lặp lại vô tận. animation-delay: -2s; ở đèn thứ hai giúp hai đèn đung đưa lệch pha nhau, trông thật hơn.
@keyframes sway: Đây là nơi định nghĩa chuyển động “đung đưa”. Đèn lồng sẽ xoay qua lại giữa hai góc 7 độ và -7 độ.
.lantern1.lit, .lantern2.lit: Đây là phần quan trọng nhất. Đoạn mã này định nghĩa trạng thái “phát sáng” (lit). Khi một chiếc đèn lồng được thêm class .lit, nó sẽ có hiệu ứng đổ bóng màu vàng cam rực rỡ và tăng độ sáng lên, tạo cảm giác như đèn đang được thắp lên.

/* Container chỉ để giữ cấu trúc, không cần flex */
.lantern-container {
  position: relative;
  z-index: 9999;
}

/* Style chung cho tất cả đèn */
.lantern1,
.lantern2 {
  position: fixed;
  top: 0px;
  height: auto;
  cursor: pointer;
  transform-origin: top center;
  animation: sway 4s ease-in-out infinite;
  transition: filter 0.3s ease;
}

/* Đèn bên trái */
.lantern1 {
  left: 20px;
  width: 100px;
}

/* Đèn bên phải */
.lantern2 {
  right: 20px;
  width: 100px;
  animation-delay: -2s;
}

/* Hiệu ứng đung đưa */
@keyframes sway {
  0%, 100% {
    transform: rotate(7deg);
  }
  50% {
    transform: rotate(-7deg);
  }
}

/* Khi click sẽ sáng */
.lantern1.lit,
.lantern2.lit {
  filter:
    drop-shadow(0 0 25px #ffc400)
    drop-shadow(0 0 15px #ff8c00)
    brightness(1.3);
}

Xử lý sự kiện Click với JavaScript

JavaScript sẽ lắng nghe các hành động của người dùng (như click chuột) và phản hồi lại. Đây là phần tạo ra “điều kỳ diệu” cho trang web.

document.addEventListener('DOMContentLoaded', ...): Đảm bảo mã chỉ chạy sau khi toàn bộ nội dung HTML đã được tải xong.
const lanterns = document.querySelectorAll(...): Tìm và chọn cả hai phần tử đèn lồng trên trang.
lanterns.forEach(...): Lặp qua từng chiếc đèn lồng đã chọn.
lantern.addEventListener('click', ...): Gán một sự kiện “lắng nghe”. Khi người dùng click vào chiếc đèn lồng nào, đoạn mã bên trong sẽ được thực thi.
lantern.classList.toggle('lit');: Đây chính là “công tắc” bật/tắt đèn. Khi click, nó sẽ kiểm tra xem đèn đã có class .lit hay chưa.
- Nếu chưa có, nó sẽ thêm class .lit vào, và đèn sẽ phát sáng (nhờ CSS ở trên).
- Nếu đã có, nó sẽ xóa class .lit đi, và đèn sẽ tắt.

document.addEventListener('DOMContentLoaded', () => {
    // Lấy cả 2 đèn: lantern1 và lantern2
    const lanterns = document.querySelectorAll('.lantern1, .lantern2');

    lanterns.forEach(lantern => {
        lantern.addEventListener('click', () => {
            lantern.classList.toggle('lit');
        });
    });
});

Kiểm tra kết quả

Lưu và kiểm tra kết quả trên máy tính:

Hai chiếc lồng đèn sẽ được treo ở hai bên màn hình, tự động đung đưa.
Khi người dùng click vào, lồng đèn sẽ phát sáng rực rỡ.
Tạo không khí Trung Thu sống động và ấm áp trên website.

Chỉ với vài dòng code đơn giản, bạn đã có thể mang hiệu ứng lồng đèn Trung Thu đầy ý nghĩa lên website của mình. Đây là cách tuyệt vời để chào mừng mùa trăng rằm và đem lại trải nghiệm thú vị cho người ghé thăm. Chúc bạn và gia đình có một mùa Trung Thu vui vẻ, trọn vẹn và ngập tràn hạnh phúc!

Hướng Dẫn Làm Hiệu Ứng Lồng Đèn Trung Thu