Web App Script CSS JS | Tạo hiệu ứng Click button Nổ tung các mảnh giấy và chuyển link

18/02/2025 giaoanppt

Giaoan.link chia sẻ đến bạn một hiệu ứng “Tạo hiệu ứng Click button Nổ tung các mảnh giấy và chuyển link” nó được viết trên nền tảng apps script được sử dụng CSS, JS. Bạn dễ dàng tích hợp nó vào trong website hoặc blog của mình. Bên dưới là code và link webapp demo.

Bạn xem webapp demo ở đây

Các project khác trên nền tảng webapp, google sheet ngẫu nhiên:

TRUY CẬP LINK YOUTUBE HƯỚNG DẪN

Mã trang “Code.gs”

function doGet() {  
  return HtmlService.createHtmlOutputFromFile('index')  
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);  
}

Mã trang “index.html”

<!DOCTYPE html>  
<html lang="vi">  
<head>  
  <meta charset="UTF-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <style>  
    body {  
      display: flex;  
      justify-content: center;  
      align-items: center;  
      height: 100vh;  
      background-color: #f0f0f0;  
      overflow: hidden;  
    }  
    #button {  
      padding: 15px 30px;  
      font-size: 20px;  
      cursor: pointer;  
      border: none;  
      background-color: #4285F4;  
      color: white;  
      border-radius: 25px;  
      position: relative;  
      z-index: 10; /* Nút bấm nằm trên cùng */  
    }  
    #button:hover {  
      background-color: red;  
    }  
    .paper {  
      position: absolute;  
      width: 15px; /* Kích thước hình  */  
      height: 15px; /* Kích thước hình */  
      background-color: rgba(255, 0, 0, 0.7);  
      //clip-path: polygon(100% 0, 72% 75%, 0 100%, 30% 34%); /* Hình thoi */ 
      clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);  /* Ngoi sao */ 
    }  
  </style>  
</head>  
<body>  

  <button id="button" onclick="explode()">MỞ TRANG</button>  


  <script>  
    function explode() {  
      const colors = ['red', 'green', 'blue', 'yellow', 'orange', 'purple'];  
      const paperCount = 200;  
      let papersCreated = 0; // Đếm số lượng mảnh giấy đã được tạo ra  

      for (let i = 0; i < paperCount; i++) {  
        createPaper(colors, () => {  
          papersCreated++;  
          // Nếu tất cả mảnh giấy đã được tạo ra, chuyển hướng đến trang  
          if (papersCreated === paperCount) {  
            setTimeout(() => {  
              window.location.href = 'https://giaoan.link';  
            }, 100); // Chờ thêm 100ms sau khi nổ để xem hiệu ứng  
          }  
        });  
      }  
    }  

    function createPaper(colors, callback) {  
      const paper = document.createElement('div');  
      paper.className = 'paper';  
      paper.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];  

      // Đặt vị trí xuất phát ở giữa màn hình  
      const startX = window.innerWidth / 2;  
      const startY = window.innerHeight / 2;  
      paper.style.left = `${startX}px`;  
      paper.style.top = `${startY}px`;  
      document.body.appendChild(paper);  

      // Tạo hướng ngẫu nhiên để nổ ra  
      const randomX = (Math.random() - 0.5) * window.innerWidth;  
      const randomY = (Math.random() - 0.5) * window.innerHeight;  

      // Tạo hoạt ảnh cho mảnh giấy  
      paper.animate([  
        { transform: 'translate(-50%, -50%)' },  
        { transform: `translate(${randomX}px, ${randomY}px)`, opacity: 0 }  
      ], {  
        duration: 4000,  
        easing: 'ease-out',  
        fill: 'forwards'  
      });  

      // Xóa mảnh giấy sau khi hoạt ảnh hoàn tất  
      setTimeout(() => {  
        paper.remove();  
        callback(); // Gọi callback sau khi mảnh giấy đã được xóa  
      }, 4000);  
    }  
  </script>  

</body>  
</html>