Làm đẹp footer Xenforo với hiệu ứng raindrops

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
17,142
Được Like
12,745
Làm đẹp footer Xenforo với hiệu ứng raindrops

Mô tả:
- Background footer 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.

Thực hiện:

Bước 1:

  • Tải về file đính kèm
  • Giải nén và upload 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 > Style của bạn > Templates > footer
Dán code bên dưới vào trên tag <div class="footerLegal">. Tuỳ chỉnh thông số opacity tuỳ theo background footer trang web của bạn, nếu background footer không có thuộc tính opacity thì xoá phần opacity= "0.4" trong tag div trong file Raindrops.html
Mã:
<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 footer.
*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 footer có vị trí liền lạc lại với nhau thành một khối.

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


Nguồn: vietdesigner.net​
 

Đính kèm

  • Raindrops.zip
    160.4 KB · Lượt xem: 25

Top Bottom