Labels

[Blogger] Hiệu ứng tuyết rơi bằng CSS3


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

 DEMO

Để 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 !
Bạn được tự do bày tỏ quan điểm nhưng nghiêm cấm spam
  • Chèn ảnh theo mẫu [img]link[/img]
  • Chèn video Youtube theo mẫu [youtube]link[/youtube]
  • Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận