Ff360
Xôi Chả Lạc
Như vậy, một mùa Noel nữa lại sắp về. Trong công việc tất bật, hối hả của những ngày cuối năm chúng ta cũng đừng quên chăm chút cho "cô nàng Web" của mình nhé. Hãy khoác lên cô nàng ấy bộ cánh mới đẹp lung linh bằng hước dẫn dưới đây nhé các bạn.
Các hiệu ứng mình sẽ hướng dẫn trong bài này:
Các bạn tải toàn bộ các file tại FILE ĐÍNH KÈM
1. Tạo hiệu ứng tuyết rơi:
Chèn code sau vào trong thẻ <head></head>. Nhớ sửa đường dẫn đến file .js cho chuẩn với của bạn nhé.
- Cách tùy chỉnh: Các bạn dùng Notepad++ ở file js lên và sửa các thông số:
Các bạn chèn code sau vào trên </html> hoặc</body>. Nhớ thay link ảnh.
Vậy là xong rồi!
Demo:
Các hiệu ứng mình sẽ hướng dẫn trong bài này:
- Hiệu ứng tuyết rơi.
- Trang trí các góc màn hình bằng cây thông, chuông,...
Các bạn tải toàn bộ các file tại FILE ĐÍNH KÈM
1. Tạo hiệu ứng tuyết rơi:
Chèn code sau vào trong thẻ <head></head>. Nhớ sửa đường dẫn đến file .js cho chuẩn với của bạn nhé.
Mã:
<script type='text/javascript' src='js/snow.mini.js'></script>- Cách tùy chỉnh: Các bạn dùng Notepad++ ở file js lên và sửa các thông số:
- var snowmax=150; Số lượng tuyết rơi
- var snowcolor=new Array("#ffffff","#ffffff","#ffffff","#ffffff","#ffffff"); Màu sắc của tuyết
- var snowletter="*" Dạng của tuyết, mặc định là bông tuyết, còn muốn tuyết tròn thì bạn thay bằng . hoặc ●
- var sinkspeed=0.6; Tốc độ rơi
- var snowmaxsize=50; Size của bông tuyết to nhất
- var snowminsize=8 Size của bông tuyết bé nhất
Các bạn chèn code sau vào trên </html> hoặc</body>. Nhớ thay link ảnh.
Mã:
<script type="text/javascript">
document.write('<style>body{padding-bottom:20px}#e_christmas_left{display:none;position:fixed;z-index:9999;top:0;left:0}#e_christmas_right{display:none;position:fixed;z-index:9999;top:0;right:0}#e_christmas_footer{display:none;position:fixed;z-index:9999;bottom:-50px;left:0;width:100%;height:104px;background:url(images/ft.png) repeat-x bottom left}#e_christmas_bottom_left{display:none;position:fixed;z-index:9999;bottom:20px;left:20px}@media (min-width: 992px){#e_christmas_left,#e_christmas_right,#e_christmas_footer,#e_christmas_bottom_left{display:block}}</style><img id="e_christmas_left" src="images/topleft.png"/><img id="e_christmas_right" src="images/topright.png"/><div id="e_christmas_footer"></div><img id="e_christmas_bottom_left" src="images/bottomleft.png"/>');
</script>Vậy là xong rồi!
