انیمیشنها¶
Odoo از انیمیشنهای چشمنواز استفاده میکند که میتوانند وبسایت شما را زنده کنند. بهصورت پیشفرض، میتوانیم از سه نوع انیمیشن استفاده کنیم:
انیمیشنهای هنگام ظاهر شدن
انیمیشنهای هنگام اسکرول
انیمیشنهای هنگام hover
هنگام ظاهر شدن¶
بهطور استاندارد، میتوانید به لطف ابزار ساخت وبسایت، هنگامی که عناصر ستون، متن و تصویر ظاهر میشوند، به آنها انیمیشن اضافه کنید. Odoo تشخیص میدهد چه زمانی عنصر شما در viewport قرار دارد و انیمیشن را آغاز میکند. مجموعهٔ بزرگی از انیمیشنها در دسترس است:
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_from_right o_anim_slide_in"
style="--wanim-intensity: 50; animation-duration: 1s; animation-delay: 0;">
<h2>A Section Subtitle</h2>
<p>Write one or two paragraphs describing your product or services.</p>
</div>
هنگام اسکرول¶
به همان شیوهای که در بالا دیدیم، میتوانید هر زمان که viewport از روی عنصر انیمیتشده اسکرول کند، انیمیشنهای اسکرول را به عناصر ستون، متن و تصویر اضافه کنید.
میتوانیم ۶ افکت انیمیشن اسکرول اضافه کنیم:
Fade
Slide
Bounce
Rotate
Zoom Out
Zoom In
علاوه بر این، میتوانیم یک افکت in یا out، direction انیمیشن، intensity انیمیشن و یک scroll zone نیز تنظیم کنیم.
استفاده
<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>
گزینه |
ویژگی data |
نوع مقدار |
|---|---|---|
شدت |
|
عدد صحیح (در CSS) |
شروع Scroll Zone |
|
عدد صحیح |
پایان Scroll Zone |
|
عدد صحیح |
همچنین ببینید
هنگام hover¶
این نوع سوم از انیمیشنها فقط به تصاویر مربوط است و هر بار که روی تصویر انیمیتشده hover میکنیم، فعال میشود.
میتوانیم از میان ۶ انیمیشن برای اعمال یک افکت hover انتخاب کنیم:
Overlay
Zoom In
Zoom Out
Dolly Zoom
Outline
Mirror Blur
استفاده
با افزودن کلاس o_animate_on_hover به تگ تصویر خود، انیمیشنهای hover را فعال کنید. نوع انیمیشن را در ویژگی data-hover-effect تعریف کنید.
توجه
Odoo تصویر را پردازش میکند و یک فایل SVG نهایی حاوی تصویر و انیمیشن ایجاد میکند. بهصورت پیشفرض، یک شکل تصویر معمولی نیز اعمال میکند. این تصویر نهایی سپس در پایگاهداده بهعنوان یک پیوست ذخیره میشود تا در آینده قابل ویرایش باقی بماند.
<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-shape="html_editor/geometric/geo_square"
data-shape-colors=";;;;"
data-filename="my-image.svg"
data-format-mimetype="image/webp" />
گزینه |
ویژگی data |
نوع مقدار |
|---|---|---|
انیمیشن |
|
رشته |
شدت |
|
عدد صحیح |
رنگ Overlay / Stroke |
|
مقدار hexadecimal یا RGBA |
عرض Stroke |
|
عدد صحیح (بهصورت |
شکل |
|
مسیر به شکل |
رنگهای شکل |
|
کد hexadecimal رنگهای در دسترس (حداکثر ۵) در شکل (هر مقدار، حتی اگر خالی باشد، با یک semicolon جدا میشود و به ایندکس پالت رنگی استفادهشده در فایل شکل ارجاع دارد) |
مهم
در این مرحله، میتوانید در یک ماژول تصاویری با انیمیشن hover درج کنید اما افکت بلافاصله پس از نصب ماژول اعمال نمیشود. از آنجا که ابزار ساخت وبسایت ابتدا باید تصویر را پردازش کند (آن را تبدیل کند و سپس بهعنوان پیوست ذخیره کند)، انیمیشن hover تنها پس از انتخاب مجدد افکت و ذخیرهٔ صفحه با ابزار ساخت وبسایت قابل مشاهده خواهد بود.