Tạo hiệu ứng tuyết rơi đẹp mắt cho website với Jquery
Cuối năm đã gần tới và không khí Giáng Sinh cũng bắt đầu tràn ngập khắp nơi. Để làm cho website của bạn có không khí Giáng Sinh, chắc bạn sẽ muốn thêm hiệu ứng tuyết rơi cho website để cho người truy cập có cảm giác như Giáng Sinh đang đến. Trong bài viết này, Passionery sẽ chia sẻ một plugin jQuery có tên Let It Snow để giúp bạn tạo ra hiệu ứng tuyết rơi đẹp mắt cho website của mình.
Lưu ý: plugin này đã được test trên Google Chrome, Firefox, Safari và các trình duyệt của điện thoại.
Thêm hiệu ứng tuyết rơi cho website
Vì đây là plugin jquery, nên bạn phải thêm thư viện của jquery vào website của mình, bạn có thể tìm thấy phiên bản mới nhất của Jquery tại đây, nếu như website của bạn đã có sẵn jquery thì không cần phải thêm nữa.
[code]<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>[/code]Tiếp theo, bạn download plugin Let It Snow tại đây và thêm file jquery.let_it_snow.js vào sau thư viện jquery
[code]<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="jquery.let_it_snow.js"></script>[/code]Bạn để 2 dòng code trên vào thẻ giữa thẻ
hoặc để vào phần cuối (trước thẻ </body>) của website bạn cũng được.Tiếp theo, bạn thêm đoạn code sau vào giữa thẻ <body> của website, như thế này:
[code type="HTML"]<body> ..... <canvas class="snow" width="100%" height="100%"></canvas> ..... </body>[/code]Bạn có thể đặt thẻ <canvas> ở bất cứ đâu trong website miễn là nó nằm trong cặp thẻ
. Tiếp đến, ta gọi plugin Let It Snow cho thẻ <canvas> để tạo hiệu ứng tuyết rơi. [code type="JQuery"]$(document).ready( function() { $("canvas.snow").let_it_snow({ speed: 5 }); });[/code]Khi đã thêm đoạn code trên vào trang web, plugin này sẽ tự động tạo ra hiệu ứng với tuyết rơi với các thiết lập mà bạn đã đặt ở trên. Các thiết đặt của plugin bao gồm:
[code type="JQuery"]$("canvas").let_it_snow({ speed: 0, interaction: true, size: 2, count: 200, opacity: 0, color: "#ffffff", windPower: 0, image: false });[/code]- speed: dùng để thiết lập tốc độ rơi của tuyết. Giá trị mặc định là 0
- interaction: gồm 2 giá trị là true (mặc định) và false. Nếu true thì các bông tuyết sẽ tản ra khi bạn dùng con trỏ chuột đụng vào nó
- size: dùng để thiết lập kích thước của các bông tuyết, mặc định là 2
- count: dùng để thiết lập số lượng bông tuyết xuất hiện trên màn hình
- opacity: dùng để thiết lập độ trong suốt của các bông tuyết
- color: dùng để thiết lập màu cho bông tuyết, mặc định là màu trắng (#ffffff)
- windPower: điều chỉnh hướng gió khi bông tuyết rơi. Số dương để gió thổi từ bên phải qua, số âm để thổi từ trái qua. Giá trị mặc định là 0
- image: dùng để thay đổi hình ảnh bông tuyết mặc định của plugin (hình vòng tròn màu trắng). Bạn có thể tự tạo cho mình một bông tuyết và đặt đường dẫn của file hình đó vào đây
Tại sao lại phải dùng cặp thẻ canvas của html5 vậy? dùng thẻ khác có được k ạ?
ReplyDelete