Анімації¶

Odoo використовує привабливу анімацію, яка може оживити ваш сайт. За замовчуванням ми можемо використовувати три види анімації:

Анімація зовнішнього вигляду
Анімації під час прокручування
Анімації при наведенні курсора

За зовнішнім виглядом¶

Стандартно ви можете додавати анімацію до елементів стовпців, тексту та зображень, коли вони з’являються, завдяки Конструктору сайтів. Odoo визначає, коли ваш елемент знаходиться в області перегляду, і запускає анімацію. Доступний великий вибір анімацій:

Fade in
Bounce in
Rotate in
Zoom in
…

Ви можете легко визначити анімацію для стовпця у вашій темі. Вам потрібно додати два класи: o_animate і o_anim_fade_in. Другий клас змінюється в залежності від типу анімації, яку ви хочете використовувати.

Додайте клас o_animate_both_scroll, щоб запускати анімацію щоразу, коли стовпчик з’являється на екрані. За замовчуванням анімація запускається лише один раз.

Ви також маєте визначити animation-duration та animation-delay безпосередньо в атрибуті style.

Крім того, ви можете додати напрямок анімації. Наприклад, щоб анімувати елемент знизу екрана, додайте клас o_anim_from_bottom і встановіть значення --wanim-intensity в атрибуті style для керування інтенсивністю напрямку анімації.

Використання

<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>

Анімація на параметрах зовнішнього вигляду

При прокручуванні¶

Так само, як ми бачили вище, ви можете додавати анімацію при прокручуванні до елементів стовпців, тексту і зображень, коли область перегляду прокручує анімований елемент.

Ми можемо додати 6 анімацій на ефекти прокрутки:

Fade
Slide
Bounce
Rotate
Zoom Out
Zoom In

Крім того, ми також можемо встановити ефект in або out, напрямок анімації, інтенсивність анімації та зону прокрутки.

Використання

<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>

Параметр	Атрибут даних	Тип значення
Інтенсивність	`--wanim-intensity`	Ціле число (у CSS)
Початок зони прокручування	`data-scroll-zone-start`	Ціле число
Кінець зони прокручування	`data-scroll-zone-end`	Ціле число

Параметри анімації під час прокручування

Перегляньте також

Website Animate

On hover¶

Цей третій вид анімації пов’язаний лише із зображеннями та запускається щоразу, коли ми наводимо курсор на анімоване зображення.

Ми можемо додати 6 анімацій при наведенні курсора:

Overlay
Zoom In
Zoom Out
Dolly Zoom
Outline
Mirror Blur

Використання

Увімкніть анімацію при наведенні курсора, додавши клас o_animate_on_hover до тегу зображення. Ви також можете визначити тип анімації в атрибуті 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)"
/>

Параметр	Атрибут даних	Тип значення
Анімація	`data-hover-effect`	рядок
Інтенсивність	`data-hover-effect-intensity`	Ціле число
Overlay / Stroke color	`data-hover-effect-color`	Шістнадцяткове або RGBA-значення
Stroke width	`data-hover-stroke-width`	Ціле число (збережено як `px`)

Параметри анімації при наведенні курсора

Перегляньте також

Параметри ефекту наведення.

Edit on GitHub