Vào dịp mùa Giáng Sinh khi đi trên đường phố chúng ta thấy các cửa hàng, tòa nhà và cả những con đường đều trang trí lộng lẫy cảnh Giáng Sinh. Hòa với không khí đó, tại sao chúng ta không trang trí website của mình để khách hàng có cảm nhận mùa Giáng Sinh ngay trên website của mình?
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>
Cách 3:
<script type=”text/javascript” src=”https://phonuiit.com/noel/snow1.js”></script>
Kết quả sau khi chèn:
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!
