- Tham gia
- 28/02/2015
- Bài viết
- 16,833
- Được Like
- 12,691
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:
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
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.
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.
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
Bài viết liên quan
Được quan tâm
Bài viết mới
