diff --git a/content/developer/howtos/website_themes/animations.rst b/content/developer/howtos/website_themes/animations.rst index 6cbd4e975..f8248ecaa 100644 --- a/content/developer/howtos/website_themes/animations.rst +++ b/content/developer/howtos/website_themes/animations.rst @@ -2,11 +2,12 @@ Animations ========== -Odoo uses eye-catching animations that can bring your website to life. By default, we can use two +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 .. _website_themes/animations/appearance: @@ -78,9 +79,87 @@ Additionally, we can also set an `in` or `out` effect, an animation `direction`

Write one or two paragraphs describing your product or services.

+.. list-table:: + :header-rows: 1 + :stub-columns: 1 + :widths: 30 50 50 + + * - Option + - Data attribute + - Value type + * - Intensity + - `--wanim-intensity` + - Integer (in the CSS) + * - Scroll Zone Start + - `data-scroll-zone-start` + - Integer + * - Scroll Zone End + - `data-scroll-zone-end` + - Integer + .. image:: animations/scroll.png :alt: Animation on scroll options .. seealso:: `Website Animate `_ + +.. _website_themes/animations/hover: + +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 + +**Use** + +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. + +.. code-block:: xml + + ... + +.. list-table:: + :header-rows: 1 + :stub-columns: 1 + :widths: 30 50 50 + + * - Option + - Data attribute + - Value type + * - Animation + - `data-hover-effect` + - String + * - Intensity + - `data-hover-effect-intensity` + - Integer + * - Overlay / Stroke color + - `data-hover-effect-color` + - Hexadecimal or RGBA value + * - Stroke width + - `data-hover-stroke-width` + - Integer (saved as `px`) + +.. image:: animations/hover.png + :width: 300 + :alt: Animation on hover options + +.. seealso:: + `Hover effect options + `_ diff --git a/content/developer/howtos/website_themes/animations/hover.png b/content/developer/howtos/website_themes/animations/hover.png new file mode 100644 index 000000000..4fb567e21 Binary files /dev/null and b/content/developer/howtos/website_themes/animations/hover.png differ