Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

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

Chủ đề thuộc danh mục 'Hướng dẫn - Thủ thuật Xenforo' được đăng bởi Tư Xả Láng, 26/8/15.

Lượt xem: 2,805

  1. Tư Xả Láng Thành viên cấp 2

    R9V9tjD.jpg
    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.

    ...
    Chỉnh sửa lần cuối: 28/8/15
    Phạm Hữu Dư thích bài viết này

Ủng hộ diễn đàn