8000 [IMP] howto/website: update navigation page · odoo/documentation@299cc64 · GitHub
[go: up one dir, main page]
Skip to content

Commit 299cc64

Browse files
karlosvalverdekarlosvalverde
committed
[IMP] howto/website: update navigation page
This commit updates current navigation page, by adding updated information. Task-4316619 closes #12579 Signed-off-by: Carlos Valverde (cvs) <cvs@odoo.com>
1 parent 8c6fb20 commit 299cc64

File tree

2 files changed

+80
-1
lines changed

2 files changed

+80
-1
lines changed

‎content/developer/howtos/website_themes/animations.rst

Lines changed: 80 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,12 @@
22
Animations
33
==========
44

5-
Odoo uses eye-catching animations that can bring your website to life. By default, we can use two
5+
Odoo uses eye-catching animations that can bring your website to life. By default, we can use three
66
kinds of animations:
77

88
- Animations on appearance
99
- Animations on scroll
10+
- Animations on hover
1011

1112
.. _website_themes/animations/appearance:
1213

@@ -78,9 +79,87 @@ Additionally, we can also set an `in` or `out` effect, an animation `direction`
7879
<p>Write one or two paragraphs describing your product or services.</p>
7980
</div>
8081
82+
.. list-table::
83+
:header-rows: 1
84+
:stub-columns: 1
85+
:widths: 30 50 50
86+
87+
* - Option
88+
- Data attribute
89+
- Value type
90+
* - Intensity
91+
- `--wanim-intensity`
92+
- Integer (in the CSS)
93+
* - Scroll Zone Start
94+
- `data-scroll-zone-start`
95+
- Integer
96+
* - Scroll Zone End
97+
- `data-scroll-zone-end`
98+
- Integer
99+
81100
.. image:: animations/scroll.png
82101
:alt: Animation on scroll options
83102

84103
.. seealso::
85104
`Website Animate
86105
<https://github.com/odoo/odoo/blob/34c0c9c1ae00aba391932129d4cefd027a9c6bbd/addons/website/static/src/scss/website.scss#L1638>`_
106+
107+
.. _website_themes/animations/hover:
108+
109+
On hover
110+
========
111+
112+
This third kind of animations is only related to images and triggered every time we hover on the
113+
animated image.
114+
115+
We can add 6 animation on hover effects:
116+
117+
- Overlay
118+
- Zoom In
119+
- Zoom Out
120+
- Dolly Zoom
121+
- Outline
122+
- Mirror Blur
123+
124+
**Use**
125+
126+
Enable animations on hover by adding the `o_animate_on_hover` class on your image tag. You can
127+
also define the type of animation in the `data-hover-effect` attribute.
128+
129+
.. code-block:: xml
130+
131+
<img
132+
src="..." alt="..."
133+
class="img img-fluid o_we_custom_image o_animate_on_hover"
134+
data-hover-effect="overlay"
135+
data-hover-effect-color="rgba(0, 0, 0, 0.25)"
136+
/>
137+
138+
.. list-table::
139+
:header-rows: 1
140+
:stub-columns: 1
141+
:widths: 30 50 50
142+
143+
* - Option
144+
- Data attribute
145+
- Value type
146+
* - Animation
147+
- `data-hover-effect`
148+
- String
149+
* - Intensity
150+
- `data-hover-effect-intensity`
151+
- Integer
152+
* - Overlay / Stroke color
153+
- `data-hover-effect-color`
154+
- Hexadecimal or RGBA value
155+
* - Stroke width
156+
- `data-hover-stroke-width`
157+
- Integer (saved as `px`)
158+
159+
.. image:: animations/hover.png
160+
:width: 300
161+
:alt: Animation on hover options
162+
163+
.. seealso::
164+
`Hover effect options
165+
<https://github.com/odoo/odoo/blob/f43fbf67c98236434429e26d9d93de71ddb06790/addons/website/views/snippets/snippets.xml#L405>`_

‎content/developer/howtos/website_themes/animations/hover.png

25.2 KB
Loading

0 commit comments

Comments
 (0)
0