Tạo hiệu ứng tuyết rơi có nút điều khiển cho website của bạn

JavaScript Snowstorm Effect for your website

Giáng sinh đã đến gần hãy cùng Iris Tips đón Noel với hiệu ứng tuyết rơi cho website của bạn nhé. Hiệu ứng này có sự tùy biến có đa dạng như màu sắc, hình dạng, tạo gió... và đặc biệt bạn có thể thiết lập các nút điều khiển cho hiệu ứng này.

• DEMO

Cách thực hiện

1Vào Mẫu >> Chỉnh sửa HTML và dán đoạn script mà bạn lựa chọn trong 2 style bên dưới vào trước thẻ </body>

Style 1: Auto Start

<script src='https://sites.google.com/site/iristipsblogger/file/snowstorm-autostart.js'></script>

Style 2: Click to Start

<script src='https://sites.google.com/site/iristipsblogger/file/snowstorm.js'></script>

Code nút điều khiển

2Để tùy chỉnh tuyết rơi bạn có thể tham khảo các thông số dưới đây và thêm đoạn script tùy chỉnh vào sau đoạn code ở bước 1

<a href="#" onclick="snowStorm.start();return false">Start Snowing</a> 
<a href="#" onclick="snowStorm.stop();return false">Stop Snowing</a> 

Trong đó:
snowStorm.start() Bắt đầu hiệu ứng
snowStorm.stop() Dừng hẳn hiệu ứng

Ngoài ra còn có 1 vài lệnh khác như:

snowStorm.randomizeWind() Thay đổi tốc độ gió ngẫu nhiên
snowStorm.freeze() Tạm dừng hiệu ứng
snowStorm.resume() Tiếp tục hiệu ứng sau khi tạm dừng
snowStorm.toggleSnow() Tạm dừng hoặc tiếp tục hiệu ứng, giống như freeze() và resume()

Tùy chỉnh hiệu ứng

snowStorm.flakesMax = 128; Số lượng bông tuyết tối đa xuất hiện trên màn hình
snowStorm.followMouse = true; Tuyết sẽ di chuyển theo con của bạn, chỉnh true lại thành false để tắt
snowStorm.snowColor = '#99ccff'; màu sắc bông tuyết
snowStorm.snowStick = true; cho phép bông tuyết "đậu" dưới màn hình

Và còn khá nhiều tùy chỉnh khác bạn có thể tự khám phá thêm nhé.

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by schill/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm