Hiệu ứng chuyển động (Animations)¶
Odoo sử dụng các hiệu ứng chuyển động bắt mắt có thể làm cho website của bạn trở nên sống động. Theo mặc định, chúng ta có thể sử dụng ba loại hiệu ứng chuyển động:
Hiệu ứng chuyển động khi xuất hiện
Hiệu ứng chuyển động khi cuộn trang
Hiệu ứng chuyển động khi di chuột qua
Khi xuất hiện¶
Theo mặc định, bạn có thể thêm hiệu ứng chuyển động vào các phần tử column, text và image khi chúng xuất hiện, nhờ vào Website Builder. Odoo phát hiện khi phần tử của bạn nằm trong viewport và kích hoạt hiệu ứng chuyển động. Có sẵn một loạt hiệu ứng để lựa chọn:
Fade in
Bounce in
Rotate in
Zoom in
…
Bạn có thể dễ dàng định nghĩa một hiệu ứng chuyển động cho một column trong theme tùy chỉnh của bạn. Bạn cần thêm hai class: o_animate và o_anim_fade_in. Class thứ hai sẽ thay đổi tùy theo loại hiệu ứng chuyển động bạn muốn sử dụng.
Thêm class o_animate_both_scroll để kích hoạt hiệu ứng chuyển động mỗi khi column xuất hiện trên màn hình. Theo mặc định, hiệu ứng chuyển động chỉ được kích hoạt một lần.
Bạn cũng nên định nghĩa animation-duration và animation-delay trực tiếp trong thuộc tính style.
Ngoài ra, bạn có thể thêm hướng cho hiệu ứng chuyển động. Ví dụ, để làm cho phần tử chuyển động từ phía dưới màn hình, hãy thêm class o_anim_from_bottom và đặt --wanim-intensity trong thuộc tính style để kiểm soát cường độ hướng của hiệu ứng.
Sử dụng
<div class="col-lg-6 o_animate o_anim_fade_in o_animate_both_scroll o_anim_from_bottom" style="--wanim-intensity: 100; animation-duration: 2s; animation-delay: 1s;">
<h2>A Section Subtitle</h2>
<p>Write one or two paragraphs describing your product or services.</p>
</div>
Khi cuộn trang¶
Tương tự như những gì chúng ta đã thấy ở trên, bạn có thể thêm hiệu ứng chuyển động khi cuộn trang vào các phần tử column, text và image mỗi khi viewport cuộn qua phần tử có hiệu ứng chuyển động.
Chúng ta có thể thêm 6 hiệu ứng chuyển động khi cuộn trang:
Fade
Slide
Bounce
Rotate
Zoom Out
Zoom In
Ngoài ra, chúng ta cũng có thể đặt hiệu ứng in hoặc out, direction (hướng) của hiệu ứng chuyển động, intensity (cường độ) của hiệu ứng chuyển động, và một scroll zone (vùng cuộn).
Sử dụng
<div class="col-lg-6 o_animate o_animate_on_scroll o_animate_out o_anim_fade_in o_anim_from_right" data-scroll-zone-start="50" data-scroll-zone-end="100" style="--wanim-intensity: 100;">
<h2>A Section Subtitle</h2>
<p>Write one or two paragraphs describing your product or services.</p>
</div>
Tùy chọn |
Thuộc tính dữ liệu (Data attribute) |
Kiểu giá trị |
|---|---|---|
Cường độ |
|
Số nguyên (trong CSS) |
Điểm bắt đầu vùng cuộn |
|
Số nguyên |
Điểm kết thúc vùng cuộn |
|
Số nguyên |
Xem thêm
Khi di chuột qua¶
Loại hiệu ứng chuyển động thứ ba này chỉ liên quan đến hình ảnh và được kích hoạt mỗi khi chúng ta di chuột qua hình ảnh có hiệu ứng chuyển động.
Chúng ta có thể thêm 6 hiệu ứng chuyển động khi di chuột qua:
Overlay
Zoom In
Zoom Out
Dolly Zoom
Outline
Mirror Blur
Sử dụng
Kích hoạt hiệu ứng chuyển động khi di chuột qua bằng cách thêm class o_animate_on_hover vào thẻ hình ảnh của bạn. Bạn cũng có thể định nghĩa loại hiệu ứng chuyển động trong thuộc tính data-hover-effect.
<img
src="..." alt="..."
class="img img-fluid o_we_custom_image o_animate_on_hover"
data-hover-effect="overlay"
data-hover-effect-color="rgba(0, 0, 0, 0.25)"
/>
Tùy chọn |
Thuộc tính dữ liệu (Data attribute) |
Kiểu giá trị |
|---|---|---|
Hiệu ứng chuyển động |
|
Chuỗi (String) |
Cường độ |
|
Số nguyên |
Màu overlay / đường viền (stroke) |
|
Giá trị hexadecimal hoặc RGBA |
Độ rộng đường viền (stroke) |
|
Số nguyên (được lưu dưới dạng |
Xem thêm