Web App Script CSS JS | Tạo hiệu ứng Click button Nổ tung các mảnh giấy và chuyển link
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.
Các project khác trên nền tảng webapp, google sheet ngẫu nhiên:
- GOOGLE SHEET WEBAPP TRA CỨU 34 TỈNH THÀNH VIỆT NAM MỚI NHẤT (SÁP NHẬP 2025)
- Quản Lý Tài Chính Cá Nhân Hiệu Quả Với Web App Google Apps Script
- Google sheet, apps script, webapp “Bé Vui Phép Nhân” – Công Cụ Luyện Toán Trực Quan Cho Học Sinh Tiểu Học
- Google sheet webapp Bé Vui Học Toán – Ứng dụng Luyện Phép Chia Trực Quan Cho Học Sinh Lớp 3
- Googlesheet appscript – Hệ Thống Đăng Ký Hồ Sơ Trực Tuyến (Online Registration Portal)
- [Share Code] Biến Google Sheet thành Web App Tra Cứu Dự Án & Tài Liệu (Miễn Phí Hosting)
- Hệ Thống Quản Lý Phòng Game “Cloud-Native” với Google Apps Script
- Hệ Thống Điều Phối & Quản Lý Đội Xe Thông Minh (Web App)
- Biến Google Sheets thành Dashboard “Viễn Tưởng” phong cách Cyberpunk
- Google appscript | Hệ thống tìm thông tin và nhập liệu 2 Form-Tự động truy vấn và upload nhiều files
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>