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:
- Ổ C đầy Di chuyển dữ liệu ZALO sang Ổ D hoặc ổ khác một cách dễ dàng Không lo zalo báo đầy ổ đĩa
- Google sheet webapp|Nhập liệu-Quản lý khách hàng – Click tên hiển thị popup thông tin thêm – Print
- Google sheet webapp | Multi Load table data từ google sheet lên web và frezee header of table.
- HTML WEBAPP CSS -Mô phỏng hệ mặt trời -Trái đất -Mặt trăng đơn giản trên nền vũ trụ đen sao lấp lánh
- Google sheet Webapp Script | Tìm kiếm, lọc và In chi tiết thông tin sản phẩm của mã Khách hàng
- Google sheet Apps script | Data Entry Popup From – Thêm mới – Chỉnh sửa – Xóa
- Google sheet Webapp Script | Quản lý đặt xe cho chuyến đi – Tài xế cập nhật hoàn thành thông tin
- Apps script Webapp | Lấy giá trị Input hiển thị lên – Web Get value input field display on web
- Google sheet Apps script | Todo List and Send mail – Tạo danh sách nhắc việc và gửi mail
- Web App Script | Bộ Icon CSS Rất dễ lập trình cho giao diện webapp
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>