アニメーション¶

Odoo では、ウェブサイトを活用できる目を引くアニメーションを使用しています。デフォルトでは、3 種類のアニメーションを使用できます。

外観上のアニメーション
スクロール時のアニメーション
ホバー時のアニメーション

外観時¶

標準では、Website Builder のおかげで、列、テキスト、画像要素にアニメーションを追加できます。要素がビューポートにあることを検出し、アニメーションを起動します。様々な種類のアニメーションが利用できます:

フェードイン
バウンス
回転
拡大
…

カスタムテーマのカラムにアニメーションを簡単に定義できます。o_animate と o_anim_fade_in の2つのクラスを追加する必要があります。 2 番目のクラスは、使用するアニメーションの種類によって変更されます。

o_animate_both_scroll クラスを追加して、カラムが画面に表示されるたびにアニメーションを起動します。アニメーションはデフォルトで一度だけ起動されます。

`animation-duration`と`animation-delay`を直接`style`属性で定義する必要があります。

さらに、アニメーション方向を追加することもできます。例えば、画面の下部から要素をアニメーション化するには o_anim_from_bottom クラスを追加し、style 属性に --wanim-intensity を設定して、アニメーションの方向強度を制御します。

使用

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

スクロール時¶

上記と同じように、列までスクロールしてアニメーションを追加できます。テキストと画像の要素 viewport がアニメーションされた要素をスクロールするたびに。

スクロール効果で 6 つのアニメーションを追加できます。

フェード
スライド
バウンス
回転
ズームアウト
拡大

さらに、in`または`out`エフェクト、アニメーション `direction、アニメーション `intensity`とスクロールゾーン`を設定することもできます。

使用

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

Option	データ属性	値の種類
強度	`--wanim-intensity`	整数（CSS内）
スクロールゾーンの開始	`data-scroll-zone-start`	整数
スクロールゾーンの終了	`data-scroll-zone-end`	整数

ホバー時¶

この3つ目の種類のアニメーションは、画像に関連しているだけで、アニメーション画像にカーソルを合わせるたびにトリガーされます。

ホバー効果に6つのアニメーションを追加できます。

Overlay
拡大
ズームアウト
ドリーズーム
概要
ミラーぼかし（ぼかし）

使用

画像タグに 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)"
/>

Option	データ属性	値の種類
アニメーション	`data-hover-effect`	文字列
強度	`data-hover-effect-intensity`	整数
オーバーレイ/ストロークの色	`data-hover-effect-color`	16進数またはRGBA 値
ストロークの幅	`data-hover-stroke-width`	整数 (`px`として保存されました)