Animációk¶
Odoo uses eye-catching animations that can bring your website to life. By default, we can use three kinds of animations:
Animations on appearance
Animations on scroll
Animations on hover
Megjelenéskor¶
In standard, you can add animations to column, text and image elements when they appear, thanks to the Website Builder. Odoo detects when your element is in the viewport and launches the animation. A large selection of animations is available:
Elhalványulás
Beugrás
Forgás
Nagyítás
…
Könnyedén meghatározhat egy animációt egy oszlopon az egyedi témájában. Két osztályt kell hozzáadnia: o_animate és o_anim_fade_in. A második osztály az animáció típusától függően változik, amelyet használni szeretne.
Adja hozzá az o_animate_both_scroll osztályt, hogy az animáció minden alkalommal elinduljon, amikor az oszlop megjelenik a képernyőn. Az animáció alapértelmezés szerint csak egyszer indul el.
You should also define an animation-duration and an animation-delay directly in the style
attribute.
Additionally, you can add an animation direction. For instance, to animate the element from the
bottom of the screen, add a o_anim_from_bottom class and set a --wanim-intensity in the style
attribute to control the animation’s direction intensity.
Használat
<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>
On scroll¶
In the same way as we have seen above, you can add animations on scroll to column, text and image elements whenever the viewport scrolls through the animated element.
We can add 6 animation on scroll effects:
Fade
Slide
Bounce
Rotate
Zoom Out
Zoom In
Additionally, we can also set an in or out effect, an animation direction , the animation
intensity and a scroll zone.
Használat
<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>
Opció |
Data attribute |
Value type |
|---|---|---|
Intensity |
|
Integer (in the CSS) |
Scroll Zone Start |
|
Egész szám |
Scroll Zone End |
|
Egész szám |
Lásd még
On hover¶
This third kind of animations is only related to images and triggered every time we hover on the animated image.
We can add 6 animation on hover effects:
Overlay
Zoom In
Zoom Out
Dolly Zoom
Outline
Mirror Blur
Használat
Enable animations on hover by adding the o_animate_on_hover class on your image tag. You can
also define the type of animation in the data-hover-effect attribute.
<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)"
/>
Opció |
Data attribute |
Value type |
|---|---|---|
Animation |
|
Szöveg |
Intensity |
|
Egész szám |
Overlay / Stroke color |
|
Hexadecimal or RGBA value |
Stroke width |
|
Integer (saved as |
Lásd még