Yêu cầu cấp quyền JavaScript
Trước tiên, bạn cần xin cấp quyền thực thi JavaScript trên Blog Garden. Ví dụ, gửi yêu cầu:
Kính gửi Ban quản trị Blog Garden,
Tôi xin phép đề nghị cấp quyền thực thi mã JavaScript để trang trí blog cá nhân với các hiệu ứng tùy chỉnh. Rất mong nhận được sự hỗ trợ. Trân trọng cảm ơn!
Thêm âm nhạc nền từ NetEase Cloud Music
Để thêm nhạc nền, bạn có thể truy cập NetEase Cloud Music, tìm bài hát yêu thích, sau đó sao chép mã nhúng từ trang bài hát và dán vào phần chỉnh sửa HTML của Blog Garden. Đối với danh sách phát, tạo một playlist, thêm các bài hát vào, sau đó lấy mã nhúng từ playlist và tích hợp tương tự.
Hiệu ứng click chuột
Đoạn mã dưới đây tạo hiệu ứng chữ khi click chuột:
<script>
document.addEventListener('DOMContentLoaded', () => {
const phrases = ['❤ Hãy theo dõi nếu bạn thích ❤', '❤ Click vào đây không phải ❤', '❤ Đừng quên like ❤', '❤ Đọc đến cuối bài ❤', '❤ Đánh giá bài viết ❤', '❤ Cảm ơn bạn ❤'];
let currentIndex = 0;
document.body.addEventListener('click', function(event) {
const span = document.createElement('span');
span.textContent = phrases[currentIndex];
currentIndex = (currentIndex + 1) % phrases.length;
const posX = event.clientX;
const posY = event.clientY;
span.style.position = 'absolute';
span.style.top = `${posY - 20}px`;
span.style.left = `${posX}px`;
span.style.zIndex = '999999999999999999999999999999999999999999999999999999999999999999999';
span.style.fontWeight = 'bold';
span.style.color = `rgb(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)})`;
document.body.appendChild(span);
span.animate([
{ top: `${posY - 180}px`, opacity: 0 },
], {
duration: 1500,
easing: 'ease-out',
fill: 'forwards'
}).onfinish = () => span.remove();
});
});
</script>
Hiệu ứng tuyết rơi
Mã dưới đây tạo hiệu ứng tuyết rơi:
<script>
document.addEventListener('DOMContentLoaded', () => {
const snowflakeCount = 600;
const minSize = 15;
const maxSize = 30;
const snowColor = '#1bd3ff';
const maxOpacity = 1.0;
const minOpacity = 0.7;
const createSnowflake = () => {
const snow = document.createElement('div');
snow.innerHTML = '❉';
snow.style.position = 'absolute';
snow.style.top = '0px';
snow.style.color = snowColor;
snow.style.fontSize = `${minSize + Math.random() * (maxSize - minSize)}px`;
snow.style.opacity = minOpacity + Math.random() * (maxOpacity - minOpacity);
snow.style.left = `${Math.random() * (window.innerWidth - 80)}px`;
document.body.appendChild(snow);
const endTop = window.innerHeight - 100;
const endLeft = Math.random() * (window.innerWidth - 80);
const duration = 5000 + Math.random() * 3000;
snow.animate([
{ top: `${endTop}px`, left: `${endLeft}px`, opacity: 0.1 }
], {
duration: duration,
easing: 'ease-out'
}).onfinish = () => snow.remove();
};
setInterval(createSnowflake, snowflakeCount);
});
</script>
Tích hợp nhân vật 2D
Có nhiều thư viện JavaScript hỗ trợ tích hợp nhân vật 2D động. Bạn có thể tìm hiểu thêm các tài liệu hướng dẫn từ cộng đồng phát triển web.