Làm đẹp chân trang Xenforo với hiệu ứng raindrops.

Mô tả:
- Background chân trang mô phỏng vùng chất lỏng với hiệu ứng bề mặt xao động lỏm bỏm do tác động của những giọt mưa. ( góc nhìn: mặt cắt ngang, không có sự hiện diện của giọt mưa )
- Lạ mắt, đẹp nhẹ nhàng, không màu mè hoa lá hẹ.
- Không xung đột Jquery, không ảnh hưởng tốc độ load trang web của bạn.

Xem demo:

Thực hiện:

Bước 1:
Tải thư mục nguồn tại đây: [LOCK]http://2701.byethost33.com/Raindrops.zip[/LOCK]
Giải nén và up file Raindrops.html và thư mục js lên thư mục xenforo của bạn.

Bước 2:
Vào ACP > Appearance > Default Style: Templates > Edit Template: footer
Dán mã bên dưới vào trên tag <div class="footerLegal">. Tuỳ chỉnh thông số opacity tuỳ theo background chân trang web của bạn, nếu background chân trang không có thuộc tính opacity thì xoá phần opacity= "0.4" trong tag div trong file Raindrops.html

Code:

<iframe style="margin-bottom:-46px;" src="
	
Raindrops.html" width="100%" height="100px" frameborder="0" scrolling="no"></iframe>

Bước 3:
Tuỳ chỉnh hiệu ứng trong file default.js, hàng số 55, id: #documentation theo hướng dẫn sau:
*color:
Tuỳ chỉnh cho trùng màu với background chân trang.
*waveLength:
Bước sóng: Mặc định: 340. Giá trị bước sóng tỉ lệ nghịch với độ dài sóng.
*frequency:
Tần số: Mặc định: 3. Số lớn hơn có nghĩa là giọt nước mưa thường xuyên hơn, và ngược lại.
*waveHeight:
Chiều cao sóng: Số lớn hơn có nghĩa là sóng cao hơn tạo ra bởi các giọt nước mưa. Mặc định: 100.
*density:
Tỉ trọng: Số lớn hơn có nghĩa là gợn sóng ngắn hơn. Mặc định: 0,02.
*rippleSpeed:
Tốc độ của hiệu ứng gợn: Số lớn hơn có nghĩa là gợn sóng nhanh hơn. Mặc định: 0.1.
*canvasWidth:
Chiều rộng của vùng nước: Mặc định là 100% chiều rộng của thành phần cha (thành phần bao ngoài).
*canvasHeight:
Chiều cao của vùng nước: Mặc định là 50% chiều cao của thành phần cha (thành phần bao ngoài).
*rightPadding:
Để che những khoảng trống không mong muốn tạo ra bởi các hình ảnh động. Mặc định: 20.
*position:
Vị trí Canvas. Mặc định: 'absolute'.
*positionBottom:
Vị trí Canvas. Mặc định: Bottom = 0.
*positionLeft:
Vị trí Canvas. Mặc định: Left = 0.

Việc sau cùng là các bạn tuỳ chỉnh các thuộc tính css cho 2 thành phần chân trang có vị trí liền lạc lại với nhau thành một khối.

Nguồn: http://www.bypeople.com/wavy-dom-elements-effects-jquery-plugin/

Chúc các bạn thành công.