Cách tạo hiệu ứng tuyết rơi cho trang web WordPress

Cách tạo hiệu ứng tuyết rơi cho trang web WordPress

Chắc hẳn các bạn ở đây đã từng nhìn thấy những trang web có hiệu ứng tuyết rơi thật đẹp mắt và thú vị vào mùa đông phải không? Bạn cũng đang muốn trang web WordPress của mình có những bông tuyết trắng bay trên màn hình trong mùa đông tới để hợp thời tiết nhưng vẫn chưa biết cách? Hãy để mình hướng dẫn bạn cách tạo hiệu ứng tuyết rơi cho trang web WordPress trong bài viết dưới đây nhé.

Hiện nay có rất nhiều cách để tạo hiệu ứng tuyết rơi cho trang web của bạn. Bạn có thể dùng cách sửa code trên trang web hoặc dùng nhiều loại plugin khác nhau. Mình sẽ hướng dẫn các bạn cách dùng plugin vì cách này đơn giản hơn nhiều và ai cũng làm được, không cần phải biết về code.

Trong WordPress, có nhiều plugin tạo hiệu ứng tuyết rơi như “WP Snow Effect”, “Weather Effect – Christmast effect, snow effect” hay “Snow Storm”. Tuy nhiên, trong bài này mình sẽ chỉ dẫn các bạn cách sử dụng plugin “WP Super Snow” vì plugin này dùng đơn giản, nhẹ, có hiệu ứng đẹp với nhiều tùy chọn.

Bước 1: Cài đặt plugin “WP Super Snow”

Trong Admin Dashboard, bạn tìm đến menu Plugins > Add New để thêm Plugin mới cho trang web.

Tiếp sau đó, trong ô tìm kiếm hãy gõ tên plugin “WP Super Snow”, plugin này sẽ hiện ra ngay ở kết quả đầu tiên với tên “WP Super Snow (Falling Snow, Customizable)”.

Chọn Install Now trong ô plugin này để cài đặt ngay, sau đó đợi một vài giây cho nút “Activate” màu xanh hiện ra thì bấm tiếp để kích hoạt plugin.

Cách tạo hiệu ứng tuyết rơi cho trang web WordPress - Cài đặt plugin “WP Super Snow”

Bước 2: Cho phép Plugin có hiệu lực trên trang Web

Lúc này, phía cuối menu trong Admin Dashboard sẽ xuất hiện mục Super Snow. Bạn hãy click vào mục đó để tùy chỉnh plugin này.

Một màn hình sẽ hiện ra như bên dưới. Lúc này plugin vẫn đang ở trạng thái “No, disable” nghĩa là đang bị vô hiệu hóa. Bạn chỉ cần bấm chọn “Yes, enable WP Super Snow!” để cho phép plugin có hiệu lực trên website của bạn. Cuối cùng, bấm Save All Change để lưu lại cài đặt là xong.

Cách tạo hiệu ứng tuyết rơi cho trang web WordPress- cho phép plugin có hiệu lực

Đến đây, là bạn đã hoàn thành việc tạo hiệu ứng tuyết rơi cho website của bạn rồi đó. Bạn hãy thử vào trang chủ trên trang web của mình để xem thành quả nhé.

Cách tạo hiệu ứng tuyết rơi cho trang web WordPress - xem lại thành quả

Tuy nhiên, lúc này, tuyết sẽ rơi trên toàn bộ website của bạn, với hình ảnh và kích thước mặc định. Bạn hoàn toàn có thể tùy chỉnh lại để tuyết rơi đẹp mắt hơn, hoặc là chỉ rơi ở một số trang nhất định.

Cách tùy chỉnh hiệu ứng tuyết rơi

Plugin WP Super Snow sẽ cho bạn khá nhiều lựa chọn để tùy chỉnh.

Ở trong mục Super Snow trong menu của Admin Dashboard, phía bên dưới mục Enable/Disable bạn vừa tùy chỉnh ở bước 2 là mục Virtual Snow Browser.

Cách tạo hiệu ứng tuyết rơi cho trang web WordPress - tùy chỉnh hiệu ứng tuyết rơi

Ở mục Virtual Snow Browser này sẽ có rất nhiều các mục con cho phép bạn tùy chỉnh các hiệu ứng của tuyết rơi. Mỗi một mục sẽ đều có hướng dẫn ngay bên dưới tên mỗi mục và bạn có thể xem trực tiếp các thay đổi khi tùy chỉnh các thông số này từ màn hình Preview plugin cho sẵn ngay phía trên. Vì vậy bạn hãy đọc kỹ hướng dẫn nhé.

Ngoài ra, mình có thêm một số lưu ý cho các mục tùy chỉnh như sau:

WP Snow Container

Mục này để bạn tùy chỉnh tuyết chỉ rơi ở những vùng nhất định trên màn hình. Ví dụ như để tuyết chỉ rơi ở phần đầu thì là “header” hoặc phần cuối thì là “footer”. Mặc định là “body” thì tuyết sẽ rơi toàn màn hình luôn.

z-Index for all Snowflakes

Mục z-Index này dùng để chỉnh độ bao phủ của tuyết. Giá trị mặc định là 999999 sẽ giúp phủ tuyết lên mọi thứ trên hầu hết diện tích trang. Nếu bạn cho số bé đi ví dụ như -1000 thì tuyết sẽ ngừng rơi luôn.

Snowflakes Images (Line-Delimited)

Nếu bạn muốn thay các hình ảnh riêng của mình hoặc thay đổi đồ họa mặc định của các bông tuyết thì bạn có thể chỉnh chúng ở đây. Tính năng này của WP Super Snow giúp bạn có thể sử dụng các hình khác nhau cho các dịp khác nhau trong năm, ví dụ như là hoa đào cho mùa xuân, bí ngô cho Haloween, hay lá bay cho mùa thu, …

Total Snowflakes to Process

Cài đặt này giúp bạn chọn số lượng bông tuyết bay trên màn hình trong cùng một khoảng thời gian. Tuy nhiên hãy chú ý là càng nhiều tuyết rơi thì trang web của bạn sẽ load càng chậm.

Max Snowflake Size (in Pixels)

Nếu bạn không muốn các bông tuyết hiển thị ra quá lớn, bạn có thể giảm kích thước của chúng ở đây. Con số ở đây thực ra là kích thước của bông tuyết to nhất được phép hiẻn thị, các bông khác sẽ nhỏ hơn và có kích thước ngẫu nhiên.

Use Snow Flake Transparency Effects?

Bạn lưu ý là việc sử dụng hiệu ứng trong suốt sẽ làm bông tuyết thông đẹp và tự nhiên hơn nhưng web sẽ load chậm đi và ngược lại.

Cách tạo hiệu ứng tuyết rơi cho trang web WordPress - hiệu ứng trong suốt

Forecasting/Conditions

Mục này để chỉnh điều kiện áp dụng plugin WP Super Snow bằng cách sử dụng các Thẻ có điều kiện – Conditional tags.

Ví dụ: chỉ áp dụng hiệu ứng tuyết rơi: trên máy tính để bàn + vào các ngày thứ 7, Chủ Nhật + trên các trang sản phẩm thuộc mục thiết bị làm lạnh.

Mục này thì các bạn cần phải có hiểu biết về viết code một chút để dùng các thẻ này. Thêm nữa là phần viết code này rất dài nên mình sẽ không nói ở đây, nếu bạn nào biết về code rồi thì có thể xem thêm phần tham khảo mà plugin đưa ra https://codex.wordpress.org/Conditional_Tags để tùy chỉnh nhé.

Nhớ bấm nút Save All Changes ở dưới cùng để lưu lại tất cả thay đổi bạn vừa thực hiện.

Cách tạo hiệu ứng tuyết rơi cho trang web WordPress - Lưu lại toàn bộ thay đổi

Lời kết

Vậy là cuối cùng chúng ta cũng đã cùng nhau thực hiện các bước đơn giản để tạo tuyết rơi cho website của bạn. Chắc hẳn với hướng dẫn này, bạn không chỉ biết cách tạo hiệu ứng tuyết rơi cho trang web WordPress mà còn biết thêm cả cách tùy chỉnh nó và tạo ra các hiệu ứng đẹp mắt khác rồi đúng không nào?

Nếu có bạn nào biết cách tạo hiệu ứng tuyết rơi cho trang web WordPress khác, đơn giản và hiệu quả hơn thì hãy cùng chia sẻ dưới mục comment nhé.

Cảm ơn các bạn đã theo dõi!

 

Gửi phản hồi