Có rất nhiều cách để bạn tạo một khung cảnh, hiệu ứng Giáng Sinh trên website.
Một cách trang trí vẫn giữ được không khí mùa Giáng Sinh nhưng lại không gây phiền hà, khó chịu cho khách hàng khi truy cập website của bạn đó là TẠO HIỆU ỨNG TUYẾT RƠI. Bài viết này tôi chia sẽ bạn một đoạn mã (code) tạo hiệu ứng Tuyết rơi trên website.
Cách làm rất đơn giản, chỉ cần copy và dán vào website của mình thôi.
Cách 1: Copy đoạn mã sau đây, dán vào trước thẻ đóng </body> hoặc thẻ đóng </html>.
<!-- Code Snow --> <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("noel/snow-medium.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(noel/snow-medium.png); -webkit-animation-duration: 20s; animation-duration: 15s; } .snow.middleground.layered { -webkit-animation-delay: 10s; animation-delay: 10s; } .snow.background { background-image: url(noel/snow-medium.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> <!-- End Code Snow -->
Cách 2: Chèn đoạn code sau vào trước thẻ đóng </body> hoặc thẻ đóng </html>
<script type=”text/javascript” src=”https://phonuiit.com/noel/it.snow.js”></script>
Vậy là xong, khi chèn xong website sẽ có được những bông tuyết rơi. Chúc các bạn thực hiện thành công!