Mùa noel tới cũng là lúc các blogger đua nhau trang trí cho website của mình như một thói quen. Tuyết rơi là một hiệu ứng không thể thiếu ! Tuy nhiên nếu bạn tích hợp hiệu ứng này bằng script thì khi vào trang người dùng có cảm giác bị giật, đơ, lag rất khó chịu.
Với sự phát triển mạnh mẽ của CSS3, hoàn toàn có thể tạo nên hiệu ứng này mà không cần dùng tới script. Bạn sẽ giảm được tình trạng giật lag nêu trên. Xem demo tại đây
Để tiến hành tích hợp bạn thực hiện như sau
Đăng nhập vào trang quản trị blog của mình và vào phần chỉnh sửa HTML
Dán đoạn code sau vào trước thẻ đóng </body>
<style type="text/css"> .snow-container{position:fixed;width:100%;max-width:100%;z-index:99999;pointer-events:none;overflow:hidden;top:0;height:100%} .snow{display:block;position:absolute;z-index:2;top:0;right:0;bottom:0;left:0;pointer-events:none;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);-webkit-animation:snow linear infinite;animation:snow linear infinite} .snow.foreground{background-image:url("https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-large-075d267ecbc42e3564c8ed43516dd557.png");-webkit-animation-duration:15s;animation-duration:10s} .snow.foreground.layered{-webkit-animation-delay:7.5s;animation-delay:7.5s} .snow.middleground{background-image:url("https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-medium-0b8a5e0732315b68e1f54185be7a1ad9.png");-webkit-animation-duration:20s;animation-duration:15s} .snow.middleground.layered{-webkit-animation-delay:10s;animation-delay:10s} .snow.background{background-image:url("https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-small-1ecd03b1fce08c24e064ff8c0a72c519.png");-webkit-animation-duration:25s;animation-duration:20s} .snow.background.layered{-webkit-animation-delay:12.5s;animation-delay:12.5s} @-webkit-keyframes snow{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{-webkit-transform:translate3d(5%,100%,0);transform:translate3d(5%,100%,0)}} @keyframes snow{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{-webkit-transform:translate3d(5%,100%,0);transform:translate3d(5%,100%,0)}} </style> <div class='snow-container'> <div class='snow foreground'></div> <div class='snow foreground layered'></div> <div class='snow middleground'></div> <div class='snow middleground layered'></div> <div class='snow background'></div> <div class='snow background layered'></div> </div>
Lưu mẫu lại và kiểm tra thành quả.
Tùy chỉnh:
+ Host 3 link ảnh về về tài khoản của bạn cho an toàn
+ Bạn có thể sử dụng thẻ b:if để quy định khi nào thì tuyết bắt đầu rơi. Ví dụ không muốn nó rơi ở trang bài viết và trang tĩnh
<b:if cond='data:blog.pageType not in {"static_page","item"}'> // Chèn code tuyết rơi vào đây </b:if>
Với thủ thuật đơn giản này bạn đã có thể trang trí cho blog của mình thêm lộng lẫy để đón giáng sinh và năm mới rồi
Good Luck !
1. Không vi phạm luật pháp nước CHXHCN Việt Nam
2. Không vi phạm thuần phong mỹ tục Việt Nam
3. Không bàn luận vấn đề liên quan đến tôn giáo, chính trị
4. Không đả kích, chửi bới hay đưa ra những lời nói không phù hợp với mục tiêu của website
5. Không bình luận với mục đích quảng cáo, trao đổi, mua bán
6. Khuyến khích sử dụng Tiếng Việt có dấu, hạn chế sử dụng tiếng lóng, viết tắt
7. Khi cần sự trợ giúp, vui lòng miêu tả chi tiết lỗi và để lại link đính kèm, tránh nói chung chung gây mất thời gian cho đôi bên