چه کسی انیمیشن های ظریف و شکل متحرک رو دوست نداره؟ اونها یک راه حل خوب برای اضافه کردن کمی پیچیدگی به وبسایت شما هستند. اگر بتونید درست از اونها استفاده کنید میتونه باعث بشه ظاهر سایتتون حرفه ای و زیبا به نظر برسه.

در این آموزش قصد دارم به شما نشون بدم که چطور با امکانات موجود در Divi بدون نیاز به Css این انیمیشن ها رو بسازید. وقتی که شما روش رو یاد بگیرید و با مثال های زیر تمرین کنید، میتونید هر نوع شکل دیگری رو برای سایت خودتون بسازید .

نتیجه

قبل از اینکه آموزش رو شروع کنیم، یک نگاه اجمالی به چهار شکل متحرکی که ساختیم بندازید و اونها رو با هم مقایسه کنید.

شکل متحرک#۱

شکل متحرک#۲

 

شکل متحرک#۳

شکل متحرک #۴

رویکرد

  • اشکال رو در ردیف های جدید که تمام padding ها رو حذف کردیم (برای کاهش فضای اضافی ای که ایجاد میشه) قرار میدیم.
  • بسته به اینکه میخواین شکل متحرک شما کدوم سمت باشه، ردیف رو تنظیم میکنید(row alignment).
  • تنظیم ردیف باعث میشه که شکل متحرک در همون طرفی که شما مشخص کردید بدون توجه به اندازه صفحه نمایش باقی بمونه .
  • ما از ماژول متنی خالی برای ساخت این اشکال استفاده میکنیم.
  • استفاده از ماژول متنی به شما کمک میکنه بتونید از گزینه های داخلی تم دیوی استفاده کنید.
  • custome Margin وPadding نقش مهمی برای ساخت این تصاویر دارند.
  • ما از Margin مثبت و منفی برای کاهش فضای ایجاد شده توسط ماژول ها و ردیف ها استفاده میکنیم و نوع اونها رو با دو بخش مختلف همپوشانی میکنیم.
  • Padding از طرفی برای ایجاد نوعی از اشکال مورد استفاده قرار میگیره.
  • Background،boxshadow و Border به شما کمک میکنند تا انواع شکلهایی رو که میخواین طراحی کنید.
  • ما در واقع داریم حلقه های انمیشنی خطی رو اضافه میکنیم که انیمیشن رو با سرعت کم نگه میداره.
  • شما می تونید همین روش رودر هنگام استفاده از اشکال خود در ماژول های تصویر اعمال کنید.

مراحل ساخت تصاویر متحرک:

یک صفحه جدید ایجاد کنید:

بعد از انتخاب عنوان نوشته Visual Builder را فعال کنید.

از قسمت Load Layout که شامل طرح های از پیش آماده است (Premade Layout) تم Design conference رو انتخاب کنید . دقت کنید که در اینجا تمرکز ما روی آموزش ساخت انیمیشن هست و به همین خاطر از یک طرح از پیش آماده استفاده میکنیم .در نهایت شما پس از اینکه روش رو یاد گرفتین میتونید برای هر صفحه و طرح دیگه ای ازش استفاده کنید.

افزودن شکل متحرک#۱

یک ردیف جدید اضافه کنید.

حالا برای ساختن اولین شکل متحرک یک ردیف جدید در این بخش اضافه کنید.

 

ساختار ستونها

حالت ۲ ستونه را انتخاب کنید

ترازبندی ردیف

به تب Design برید و در قسمت alignment  حالت left Row Alignment رو انتخاب کنید تا شکل متحرک در سمت چپ صفحه دیده بشه.

حالا به قسمت spacing برید و مقادیر پیش فرض هر کدام را با افزودن “۰px” به هر یک از گزینه ها حذف کنید.

افزودن یک ماژول تکست خالی به ستون ۱

به ستون ۱ بروید و یک ماژول تکست خالی را به آن اضافه کنید.

رنگ پس زمینه

رنگ پس زمینه ماژول تکست رو به مقدار rgba(255,255,255,0.14) تغییر بدین.

فاصله

ما قصد داریم دو چهار مورد را در زیر مجموعه زیربنایی انجام دهیم؛ ساخت یک شکل با پد سفارشی، خلاص شدن از فضای ایجاد شده توسط ردیف و ماژول، فشار دادن شکل به سمت چپ و ساخت ماژول متن با ردیف دوم روبرو می شوند:

  • Top Margin: -100px
  • Right Margin: 100px
  • Bottom Margin: -500px
  • Left: -100px
  • Top Padding: 200px
  • Bottom Padding: 400px

 

حاشیه

برای ایجاد یک دایره از مستطیل به روش زیر عمل کنید:

انیمیشن

در نهایت یک انیمیشن حلقه ای رو مطابق با مقادیر زیر اعمال کنید:

  • Animation Style: Roll
  • Animation Repeat: Loop
  • Animation Direction: Center
  • Animation Duration: 20000ms
  • Animation Intensity: 500%
  • Animation Start Opacity: 100%
  • Animation Speed Curve: Linear

پس از انجام مراحل بالا و ذخیره تغییرات اعمال شده از ردیفی که درست کردیم یک کپی میگیریم تا در سمت راست این بخش قرار بگیره.

جهت این ردیف رو تغییر میدیم و میبریمش سمت راست :

یک ماژول تکست خالی در ستون سمت راستی هم قرار میدیم . در ردیف قبلی در ستون سمت چپ ماژول تکست گذاشتیم.

تغییر فاصله در ماژول متنی

این تغییرات را اعمال میکنیم تا ماژول بره سمت راست

  • Right Margin: -50px
  • Bottom Margin: -350px
  • Left: 50px
  • Top Padding: 250px
  • Bottom Padding: 250px

شکل متحرک #۲

مشابه تصویر شماره ۱ ساخته میشه .فقط یک سری اصلاحاتی باید روش انجام بشه.

هر دو ماژول متنی را تغییر بدین

حاشیه

اولین چیزی که نیاز به تغییر داره ایجاد گوشه های گرد در زیرمجموعه حاشیه (Border) است. از مقدار ۲۰px به جای ۵۰۰px در تصویر قبلی استفاده کنید.

شکلی که ایجاد کردیم چون دیگه دایره نیست خیلی سریعتر از شکل ۱ میچرخه بنابراین مدت زمان انیمیشن رو افزایش میدیم :۱۰۰۰۰۰ms

افزودن شکل متحرک#۳

یک ردیف جدید اضافه کنید

مکان ردیف

برای این شکل متحرک به سمت پایین صفحه اسکرول کنید و در سکشن ‘About Divi 100 Design’ یک ردیف در پایین این بخش اضافه کنید.

 

چهار ستون رو برگزینید:

تراز کردن ردیف

در اینجا هم باید جهت ردیف با اون سمتی که ما میخوایم تصویر متحرک رو بزاریم منطبق باشه که در اینجا باید سمت چپ باشه:

فاصله

در اینجا هم تمام فواصل پیش فرض رو با قرار دادن مقدار “۰px” از بین می بریم:

در دو شکل قبلی این انیمیشن ها در تبلت و تلفن همراه هم به خوبی نمایش داده میشند اما در مورد شکل سوم برای صفحه نمایش های کوچکتر مناسب نیست بنابراین از قسمت visibility این انیمیشن رو برای تبلت و تلفن همراه غیرفعال میکنیم.

افزودن ماژول متنی

یک ماژول متنی خالی به ستون ۱ اضافه کنید

فاصله

باید مطمئن بشیم که هیچ فاصله اضافی ای با این ردیف جدید و ماژول متنی به وجود نیامده .بنابراین در زیرمجموعه spacing مقادیر زیرو وارد کنید:

  • Top Margin: -150px
  • Right Margin: 25%
  • Bottom Margin: -50px
  • Left Margin: -25%
  • Top Padding: 250px

حاشیه

مقادیر زیرو در زیرمجموعه تنظیمات حاشیه اضافه کنید:

  • Border Width: 5px
  • Border Color: #۴۶۴۶c4

بسته به سلیقه شخصیتون میتونید در قسمت Box Shadow یکی از گرینه ها رو انتخاب کنید تا به شکل عمق داده بشه:

انیمیشن

در نهایت یک انمیشن حلقه ای (یعنی تکرار بشه پشت سر هم) رو هم در تنظیماتش اعمال میکنیم:

  • Animation Style: Roll
  • Animation Repeat: Loop
  • Animation Direction: Center
  • Animation Duration: 25000ms
  • Animation Intensity: 100%
  • Animation Starting Opacity: 50%
  • Animation Speed Curve: Linear

این ماژول متنی رو که ساختین کلون کنید( یک کپی ازش بزنید) و بزارید در همون ستون اول باقی بمونه .منتها باید یک سری تغییراتی روش انجام بشه .مطابق زیر عمل کنید:

  • Top Margin: -50%
  • Right Margin: 25%
  • Bottom Margin: -200px
  • Left Margin: -25%
  • Top Padding: 250px

تغییر رنگ حاشیه

رنگ حاشیه این شکل رو به مقدار ‘#aaaaaa’ تغییر بدین.

تغییر انیمیشن

به تب انیمیشن برید و تاخیر انیمیشن با مقدار ‘۱۰۰۰ms’ رو قرار بدین.

افزون تصویر متحرک#۴

در هوم پیج این تمی که انتخاب کردیم یک مقدار برید پایین تر و درست بالای ماژول تکست ‘Our Sponsors’ یک ردیف جدید چهار ستونه اضافه کنید.

در Row alignment سمت راست رو انتخاب کنید:

فاصله

مطابق با تصاویر قبلی در اینجا هم در تنظیمات Spacing تمام مقادیر Custom Padding رو مساوی صفر قرار بدین:

امکان مشاهده شدن

در اینجا هم Visibility رو برای تبلت و تلفن هوشمند غیرفعال میکنیم.

 

یک ماژول متنی خالی به ستون ۴ اضافه میکنیم.

پس زمینه گرادیان

در اینجا میخوایم یک پس زمینه حالت گرادیان به این تصویر اضافه کنیم که شامل دو رنگ زیر و تنظیمات پیش فرض گرادیان هست:

  • First Color: #d002ba
  • Second Color: #۱۶۶cc2

 

فاصله

فاصله این ماژول متنی شکل رو در اینجا ایجاد میکنه و اون رو به سمت راست هل میده که با بخش قبلی خودش هم همپوشانی داره .تنظیمات زیرو اعمال کنید:

  • Top Margin: -80%
  • Right Margin: -25%
  • Bottom Margin: -120px
  • Left Margin: 25%
  • Top Padding: 250px

 

حاشیه

مطابق تصویر عمل کنید:

ایجاد سایه

برای عمق دادن به تصویر مطابق زیر عمل کنید:

انیمیشن

مطابق زیر تنظیمات رو اعمال کنید:

  • Animation Style: Roll
  • Animation Repeat: Loop
  • Animation Direction: Center
  • Animation Duration: 25000ms
  • Animation Intensity: 100%
  • Animation Starting Opacity: 70%
  • Animation Speed Curve: Linear

کلون کردن ماژول

این ماژول متنی رو کلون کنید و در همین ستون هم باقی بمونه .فقط باید یک سری تغییرات کوچیکی روش انجام بدین .top Margin رو به ‘-۵۰%’ تغییر بدین.

تغییر انیمیشن

مطابق تصویر زیر عمل کنید:

نتیجه کار:

شکل #۱

شکل #۲

شکل#۳

شکل #۴

در اینجا کار به پایان رسید و شما میتونید از این روش برای ساخت تصاویر متحرک در وبسایتتون استفاده کنید .

برای مشاهده مقاله به زبان اصلی اینجا کلیک کنید.

اگر مایلید که سایر مقالات مرتبط با پوسته زیبا و قدرمتند دی وی رو هم بخونید، اینجا کلیک کنید .