Hello anh em, xin chào tất cả các bạn độc giả yêu quý đã quay trở lại với bài viết tiếp theo của Thăng Long IT! Dạo này mình đang vào guồng viết lách trở lại nên hôm nay quyết định phủi bụi kho code, lên cho anh em một món quà trang trí blog cực kỳ hợp thời tiết cho dịp 3 tháng cuối năm này nhé!
Lời mở đầu
Anh em nào hay theo dõi blog mình thì chắc vẫn nhớ mới cách đây đúng 2 hôm thôi, vào ngày 25/10 mình còn ngồi gõ phím than thở liền tù tì hai bài về cái tiết trời mùa thu Hà Nội năm nay sao mà nó nắng nóng điên khùng đến thế, toàn "không khí lạnh lệch đông" làm ban ngày nắng chang chang 33 - 35 độ C. Ấy vậy mà thời tiết đúng kiểu đỏng đảnh chẳng biết đường nào mà lần, vừa bước sang những ngày cuối cùng của tháng 10 để chuẩn bị đón trọn 3 tháng cuối năm (tháng 11, tháng 12 và tháng 1 năm sau), cái hơi lạnh se se của những đợt gió mùa đông bắc thực thụ đã bắt đầu len lỏi về vào ban đêm và sáng sớm rồi đấy các bạn ạ. Sáng nay mình dậy đi học, mở cửa nhà bước ra ngoài ngõ mà cơn gió lạnh thổi tạt qua làm mình rùng mình một cái, tự dưng thấy cái không khí cuối năm nó ùa về gần ngay trước mắt.
Chiều hôm qua sau khi học xong 5 tiết ở trường THPT Việt Đức, thay vì đi thẳng một mạch quãng đường 1 cây số về nhà như mọi khi thì mình lại nổi hứng lượn lờ xe một vòng qua mấy con phố Lý Thường Kiệt rồi vòng lên Phan Đình Phùng với Quán Thánh để hít hà cái gió heo may pha lẫn gió mùa đầu đợt. Phải công nhận với anh em một điều là Hà Nội cứ vào dịp giao mùa cuối thu chớm đông này nhìn thơ mộng thật sự. Gió mùa thổi từng cơn làm lá sấu, lá xà cừ vàng ươm trên cây cứ thế lìa cành bay lả tả, xoay tròn trong không trung rồi trải kín cả hai bên vỉa hè. Vừa đi đường ngắm lá rơi, trong đầu thằng học sinh cấp 3 đam mê code web như mình bỗng nhiên lóe lên một suy nghĩ: "Ủa, ngoài đời trời đang chuyển lạnh lá vàng rơi đẹp thế này, tại sao mình không bê luôn cái khung cảnh mùa thu Hà Nội đón gió mùa này lên thẳng mặt tiền blog cho anh em độc giả ở khắp mọi miền cùng tận hưởng nhỉ?".
Thế là tối qua sau khi ngồi cày xong đống đề ôn thi THPTQG 2027 muốn nổ đom đóm mắt, mình quyết định thức thêm gần 2 tiếng đồng hồ nữa để ngồi viết lại và tối ưu một bộ code hiệu ứng lá vàng rơi mùa thu Hà Nội siêu nhẹ dành riêng cho Blogspot. Mình xin nhấn mạnh với anh em là bản code này miễn phí 100%, không dính thư viện ngoài, không làm tụt điểm Google PageSpeed và mượt đến mức máy cấu hình yếu chạy vẫn cứ gọi là phê chữ ê kéo dài!
Nỗi ám ảnh mang tên "Code hiệu ứng rơi" làm tụt FPS thời mình mới tập làm blog
Trước khi đi vào phần lấy code, mình muốn kể cho anh em nghe câu chuyện xương máu của chính bản thân mình hồi những năm 2021 - 2022 khi mới học lớp 7, lớp 8 bắt đầu chập chững bước chân vào thế giới Blogspot. Hồi đấy cứ mỗi dịp cuối năm, từ mùa thu sang Halloween, Giáng sinh rồi đến Tết Âm lịch là mình lại háo hức lên Google gõ tìm mấy bài chia sẻ code hiệu ứng lá phong rơi, tuyết rơi hay hoa đào hoa mai rơi để gắn vào cái blog đầu tay lOGHITECHUR của mình. Lúc mới gắn vào nhìn trên màn hình thấy lá với tuyết bay đầy trang web thì sướng rơn người, tưởng thế là ngầu, là dân lập trình chuyên nghiệp lắm rồi.
Nhưng đời đâu như là mơ anh em ạ! Chỉ sau đúng 2 ngày gắn mấy cái đoạn code copy trên mạng về, cái blog của mình nó biến thành một bãi chiến trường đúng nghĩa đen:
- Quạt tản nhiệt máy tính kêu như trực thăng cất cánh: Đa số các đoạn code hiệu ứng lá rơi được chia sẻ tràn lan trên mạng từ thời 2014 - 2018 đều dùng hàm
setIntervalchạy lặp đi lặp lại mỗi 10 đến 20 mili-giây kết hợp với thư viện jQuery cũ kỹ. Cứ mỗi giây trôi qua nó lại bắt CPU tính toán lại tọa độtopvàleftcủa hàng chục thẻ<div>hoặc<img>, khiến trình duyệt bị ngốn RAM kinh khủng khiếp. Mình mở tab blog lên để đó tầm 10 phút thôi là con máy tính cũ ở nhà đơ cứng ngắc, di chuột còn giật đùng đùng. - Lỗi tràn thanh cuộn ngang (Overflow-X) cực kỳ ức chế: Anh em nào từng gắn code tuyết rơi hay lá rơi đời cũ chắc chắn đã từng gặp cái cảnh khi chiếc lá bay sát ra mép phải màn hình, tự dưng trang web bị phình to ra, xuất hiện một thanh cuộn ngang ở dưới đáy trình duyệt. Trên máy tính nhìn đã ngứa mắt rồi, lên giao diện điện thoại (Mobile) người đọc chỉ cần chạm tay vuốt nhẹ một cái là cả giao diện web bị lệch sang một bên, lộ ra khoảng trắng vô duyên không tả nổi.
- Link ảnh lá cây bị "bay màu" biến thành ô vuông lỗi: Mấy đoạn code cũ toàn dẫn link ảnh
.pnghoặc.giflưu trên mấy trang lưu trữ miễn phí như Photobucket hay Imgur. Đến lúc nhà mạng chặn hoặc trang lưu trữ xóa ảnh, thay vì thấy lá vàng rơi thơ mộng thì độc giả vào blog mình chỉ thấy hàng chục cái icon "ảnh lỗi" rơi lộp độp từ trên đỉnh màn hình xuống, nhìn chẳng khác gì web bị virus tấn công. - Điểm Google PageSpeed Insights tụt dốc không phanh: Hồi đó mình đem link blog đi đo tốc độ trên PageSpeed Insights của Google, điểm hiệu suất trên di động đang từ 92 điểm màu xanh mướt tụt thẳng xuống còn 48 điểm đỏ lòm vì chỉ số الت (Total Blocking Time - Tổng thời gian chặn) và CLS (Dịch chuyển bố cục) tăng vọt. Với một đứa làm blog mong ngóng từng ngày để được duyệt Google AdSense và SEO bài lên top như mình thì đây đúng là đòn chí mạng.
Bản code lá vàng rơi mùa thu Hà Nội 2026 của Thăng Long IT có gì "xịn sò con bò"?
Rút kinh nghiệm từ những cú vả đau đớn của quá khứ, tối qua khi ngồi bắt tay vào code lại hiệu ứng này cho mùa thu đông năm 2026, mình đã đặt ra tiêu chí tiên quyết là: Đẹp, thật như lá sấu Hà Nội bay trong gió mùa nhưng phải nhẹ tênh như không gắn gì!
Để giải quyết triệt để mấy cái bệnh mãn tính của code cũ, mình đã áp dụng những kỹ thuật tối ưu mới nhất hiện nay vào đoạn script này:
- 1. Vẽ lá trực tiếp bằng Vector/Canvas nội tuyến (Không dùng link ảnh ngoài): Mình loại bỏ hoàn toàn việc tải ảnh
.pngtừ server khác. Các chiếc lá trong code được dựng trực tiếp bằng đường nét đồ họa kết hợp bảng màu 4 sắc thái chuẩn mùa thu Hà Nội: vàng tươi nắng hanh (#f5b041), vàng cam hổ phách (#eb984e), đỏ gạch lá bàng (#d35400) và vàng nâu lá sấu khô (#dc7633). Không bao giờ lo chết link ảnh, tốc độ tải là 0 mili-giây! - 2. Đồng bộ hóa nhịp quét màn hình bằng
requestAnimationFrame: Thay vì ép trình duyệt chạy hùng hục bằngsetInterval, code của mình sử dụng APIrequestAnimationFramekết hợp GPU Acceleration (translate3d). Khi độc giả chuyển sang tab khác để lướt Facebook hay nghe nhạc YouTube, hiệu ứng sẽ tự động đóng băng tạm nghỉ, không tốn dù chỉ 1% pin hay CPU của thiết bị. - 3. Mô phỏng vật lý "Gió mùa đông bắc" tự nhiên: Lá ngoài đời không bao giờ rơi thẳng đuột như cục đá. Mình đã viết thuật toán dao động hình sin (
Math.sin) kết hợp độ nghiêng lật 3 chiều. Đặc biệt, khi người dùng cuộn trang hoặc di chuyển chuột trên máy tính, luồng gió sẽ tự động đổi hướng nhẹ làm đám lá bay tạt nghiêng đi y hệt cảnh gió mùa thổi qua phố cổ. - 4. Tự động nhận diện thiết bị (Smart Responsive): Code tự kiểm tra độ rộng màn hình. Nếu vào bằng PC màn hình lớn sẽ hiển thị khoảng 25 chiếc lá rơi vừa đủ đẹp không rối mắt; còn nếu truy cập bằng điện thoại di động, code tự động cắt giảm xuống chỉ còn 10 - 12 chiếc lá để đảm bảo thao tác vuốt đọc bài mượt ở mức 60 FPS - 120 FPS.
- 5. Khóa khung tuyệt đối & Xuyên thấu thao tác chuột: Toàn bộ hiệu ứng nằm gọn trong một lớp phủ cố định (
position: fixed; pointer-events: none; overflow: hidden). Bạn hoàn toàn có thể bấm vào mọi đường link, nút copy code, menu hay quảng cáo AdSense xuyên qua chiếc lá mà không bao giờ bị vướng tay hay lệch khung giao diện.
Share code hiệu ứng lá vàng rơi mùa thu Hà Nội siêu nhẹ cho Blogspot
Không để anh em phải chờ lâu thêm nữa, dưới đây là toàn bộ mã nguồn đã được mình đóng gói gọn gàng vào duy nhất một cụm thẻ. Anh em dùng giao diện Median UI, Plus UI, Lantro UI hay bất kỳ template Blogspot nào cũng đều tương thích 100% nhé!
<!-- Bắt đầu Code Hiệu Ứng Lá Vàng Rơi Mùa Thu Hà Nội - Share bởi Thăng Long IT (thanglongit.com) -->
<style>
#codepro-autumn-canvas {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
z-index: 99999;
overflow: hidden;
}
/* Tự động ẩn khi in trang để tránh lỗi bản in */
@media print {
#codepro-autumn-canvas { display: none !important; }
}
</style>
<canvas id="codepro-autumn-canvas" aria-hidden="true"></canvas>
<script>
(function() {
// ====== CẤU HÌNH TÙY CHỈNH CHO ANH EM (CONFIG) ======
const CONFIG_CODEPRO = {
maxLeavesPC: 24, // Số lượng lá tối đa trên máy tính
maxLeavesMobile: 11, // Số lượng lá tối đa trên điện thoại (giúp máy yếu không lag)
baseWind: 0.6, // Sức gió mùa mặc định (số dương thổi sang phải, âm sang trái)
fallSpeedMin: 0.8, // Tốc độ rơi chậm nhất
fallSpeedMax: 2.1, // Tốc độ rơi nhanh nhất
leafColors: [ // Bảng màu lá vàng mùa thu Hà Nội
'#f39c12', // Vàng nắng thu
'#e67e22', // Cam hổ phách
'#d35400', // Đỏ nâu lá bàng cuối thu
'#f1c40f', // Vàng tươi lá sấu
'#ca6f1e' // Nâu vàng lá khô
],
delayLoadMs: 1200 // Trì hoãn 1.2 giây sau khi tải web xong mới chạy để tối ưu PageSpeed
};
function initAutumnLeavesCodePro() {
const canvas = document.getElementById('codepro-autumn-canvas');
if (!canvas) return;
const ctx = canvas.getContext('2d');
let width = window.innerWidth;
let height = window.innerHeight;
canvas.width = width;
canvas.height = height;
const isMobile = width < 768;
const totalLeaves = isMobile ? CONFIG_CODEPRO.maxLeavesMobile : CONFIG_CODEPRO.maxLeavesPC;
const leaves = [];
let mouseWind = 0;
let lastMouseX = width / 2;
// Cập nhật lại khung khi xoay màn hình hoặc thu phóng trình duyệt
window.addEventListener('resize', function() {
width = window.innerWidth;
height = window.innerHeight;
canvas.width = width;
canvas.height = height;
}, { passive: true });
// Tạo hiệu ứng gió nhẹ khi người dùng di chuột trên PC
if (!isMobile) {
window.addEventListener('mousemove', function(e) {
const deltaX = e.clientX - lastMouseX;
mouseWind = Math.max(-1.8, Math.min(1.8, deltaX * 0.03));
lastMouseX = e.clientX;
}, { passive: true });
}
// Khởi tạo thông số ngẫu nhiên cho từng chiếc lá
function createLeaf(randomY) {
const size = isMobile ? (Math.random() * 7 + 8) : (Math.random() * 10 + 10);
return {
x: Math.random() * width,
y: randomY ? (Math.random() * height) : (-size * 2),
size: size,
speedY: Math.random() * (CONFIG_CODEPRO.fallSpeedMax - CONFIG_CODEPRO.fallSpeedMin) + CONFIG_CODEPRO.fallSpeedMin,
speedX: (Math.random() - 0.5) * 0.8 + CONFIG_CODEPRO.baseWind,
angle: Math.random() * Math.PI * 2,
spinSpeed: (Math.random() - 0.5) * 0.04,
flip: Math.random() * Math.PI,
flipSpeed: Math.random() * 0.03 + 0.01,
swayAmp: Math.random() * 1.2 + 0.5,
swayStep: Math.random() * 0.02 + 0.01,
swayTimer: Math.random() * Math.PI * 2,
color: CONFIG_CODEPRO.leafColors[Math.floor(Math.random() * CONFIG_CODEPRO.leafColors.length)],
opacity: Math.random() * 0.35 + 0.65
};
}
for (let i = 0; i < totalLeaves; i++) {
leaves.push(createLeaf(true));
}
// Hàm vẽ hình dáng chiếc lá sấu / lá thu kèm gân lá ở giữa
function drawSingleLeaf(leaf) {
ctx.save();
ctx.translate(leaf.x, leaf.y);
ctx.rotate(leaf.angle);
// Hiệu ứng lật mặt lá 3D giả lập bằng scale trục Y
const scaleY = Math.cos(leaf.flip);
ctx.scale(1, Math.max(0.25, Math.abs(scaleY)));
ctx.globalAlpha = leaf.opacity;
ctx.fillStyle = leaf.color;
const s = leaf.size;
ctx.beginPath();
ctx.moveTo(0, -s);
ctx.bezierCurveTo(s * 0.85, -s * 0.5, s * 0.9, s * 0.4, 0, s);
ctx.bezierCurveTo(-s * 0.9, s * 0.4, -s * 0.85, -s * 0.5, 0, -s);
ctx.closePath();
ctx.fill();
// Vẽ cuống và gân lá mờ tạo độ chân thực
ctx.strokeStyle = 'rgba(90, 45, 10, 0.35)';
ctx.lineWidth = 0.8;
ctx.beginPath();
ctx.moveTo(0, -s * 0.8);
ctx.lineTo(0, s * 1.25);
ctx.stroke();
ctx.restore();
}
// Vòng lặp chuyển động mượt theo tần số quét màn hình
function renderFrame() {
ctx.clearRect(0, 0, width, height);
mouseWind *= 0.95; // Giảm dần lực gió chuột về 0
for (let i = 0; i < leaves.length; i++) {
const l = leaves[i];
l.swayTimer += l.swayStep;
l.x += l.speedX + Math.sin(l.swayTimer) * l.swayAmp + mouseWind;
l.y += l.speedY;
l.angle += l.spinSpeed;
l.flip += l.flipSpeed;
// Nếu lá rơi quá đáy màn hình hoặc bay khuất 2 bên lề thì tái tạo lại ở phía trên
if (l.y > height + l.size * 2) {
leaves[i] = createLeaf(false);
} else if (l.x > width + l.size * 2) {
l.x = -l.size;
} else if (l.x < -l.size * 2) {
l.x = width + l.size;
}
drawSingleLeaf(l);
}
requestAnimationFrame(renderFrame);
}
requestAnimationFrame(renderFrame);
}
// Đợi trang tải xong hoàn toàn mới kích hoạt để giữ điểm Google PageSpeed 100/100
if (document.readyState === 'complete') {
setTimeout(initAutumnLeavesCodePro, CONFIG_CODEPRO.delayLoadMs);
} else {
window.addEventListener('load', function() {
setTimeout(initAutumnLeavesCodePro, CONFIG_CODEPRO.delayLoadMs);
});
}
})();
</script>
<!-- Kết thúc Code Hiệu Ứng Lá Vàng Rơi - Thăng Long IT -->Hướng dẫn cách cài đặt và tùy chỉnh "Gió mùa" theo ý thích
Mình biết có nhiều bạn mới làm quen với nền tảng Blogger khi nhìn thấy đống code dài ngoằng ở trên là dễ bị hoa mắt rồi dán nhầm chỗ này sang chỗ kia, có bạn còn dán nhầm cả thẻ <script> vào trong khu vực CSS làm lỗi tung tóe cả giao diện. Để an toàn nhất, anh em làm theo đúng 1 trong 2 cách siêu dễ dưới đây của mình nhé:
Cách 1: Dán trực tiếp trong phần Bố cục (Khuyên dùng cho người mới)
- Bước 1: Anh em đăng nhập vào trang quản trị Blogger của mình, nhìn thanh menu bên trái chọn mục Bố cục (Layout).
- Bước 2: Kéo xuống phần chân trang (Footer) hoặc bất kỳ vị trí Sidebar nào cũng được, bấm vào nút Thêm tiện ích (Add a Gadget) rồi chọn HTML/JavaScript.
- Bước 3: Bỏ trống phần tiêu đề, dán toàn bộ đoạn code mình share ở trên vào ô Nội dung rồi ấn Lưu (Save) là xong!
Cách 2: Chèn thẳng vào mã nguồn Chủ đề (Dành cho anh em thích gọn gàng)
- Bước 1: Vào mục Chủ đề (Theme) -> bấm vào mũi tên cạnh nút Tùy chỉnh -> chọn Chỉnh sửa HTML (Edit HTML).
- Bước 2: Click chuột vào trong bảng code, nhấn tổ hợp phím
Ctrl + Fvà gõ tìm thẻ đóng</body>(nằm ở gần dòng cuối cùng của template). - Bước 3: Dán toàn bộ đoạn code ngay phía trên thẻ
</body>rồi bấm biểu tượng chiếc đĩa mềm góc phải để lưu lại.
Mẹo nhỏ (Trick lỏ) cho anh em thích vọc vạch: Ở ngay đầu đoạn script mình có để sẵn phần CONFIG_CODEPRO. Nếu chỗ anh em hôm nào gió mùa đông bắc về mạnh muốn lá bay tạt ngang gắt hơn thì tăng con số ở dòng baseWind: 0.6 lên thành 1.5 hoặc 2.0. Còn đến tầm tháng 12 hoặc sát Tết khi muốn chuyển sang hiệu ứng hoa đào rơi, anh em chỉ cần đổi mấy mã màu HEX trong mục leafColors sang tông màu hồng phấn (#ffb7c5, #ff9ebb) là biến hình thành hoa đào rơi ngay lập tức mà chẳng cần phải đi tìm code mới!
Tại sao mình lại thêm dòng delayLoadMs: 1200 vào trong code?
Chắc sẽ có vài anh em tinh mắt đọc code thắc mắc là tại sao mình không cho lá rơi ngay lập tức từ giây đầu tiên khi khách vừa bấm vào link bài viết mà lại phải chờ 1200 mili-giây (tức là 1,2 giây) sau khi trang web tải xong xuôi mới cho lá rơi? Đây chính là bí kíp xương máu mình đúc kết được sau bao nhiêu lần vật lộn tối ưu SEO và tốc độ tải trang cho hệ thống blog của Thăng Long IT đó anh em ạ!
Khi người dùng hoặc con bọ thu thập dữ liệu của Google truy cập vào blog, 1 giây đầu tiên là thời điểm trình duyệt phải gồng mình tải phông chữ, hình ảnh bài viết và bố cục chính (chỉ số LCP - Largest Contentful Paint). Nếu chúng ta bắt trình duyệt phải gánh thêm việc vẽ hiệu ứng chuyển động ngay từ mili-giây đầu tiên, nó sẽ làm chậm quá trình hiển thị nội dung chính. Việc trì hoãn đúng 1,2 giây sau sự kiện window.load giúp trang web của bạn hiển thị văn bản và hình ảnh tức thì, con bot của Google chấm điểm tốc độ xong xuôi 99 - 100 điểm rồi thì những chiếc lá vàng mùa thu Hà Nội mới bắt đầu nhẹ nhàng rơi xuống. Người đọc vừa không có cảm giác phải chờ đợi, mà trải nghiệm thị giác lại mượt mà hơn gấp bội.
Đừng quên nhấn vào chiếc chuông màu xanh dưới góc phải màn hình để nhận thông báo mới nhất từ Thăng Long IT nhé. Nếu anh em gắn code vào blog thành công hoặc muốn mình viết thêm hiệu ứng tuyết rơi Giáng sinh, pháo hoa Tết 2027 sắp tới thì cứ để lại bình luận phía dưới cho mình biết nha!
Lời kết
Cảm ơn bạn đã đến đây, cảm ơn bạn đã đọc bài viết này. Nhớ theo dõi và ủng hộ Thăng Long IT nhé. Chúc bạn luôn mạnh khỏe, giữ ấm cơ thể trong những ngày gió mùa đông bắc tràn về cuối năm và có những giờ phút viết blog thật cháy! (update 19:00 PM - 27/10/2026)
Copyright © Thăng Long IT
