ساخت انیمیشن‌ CSS و JavaScript در دروپال 8

کتابخانه‌های CSS و جاوا اسکریپت زیادی در سراسر اینترنت وجود دارد که به شما امکان ایجاد انیمیشن برای اجزای مختلف وبسایتتان را می‌دهند تا بتوانید وبسایتی جذاب خلق نمایید.ماژول اینیمیشن‌سازی دروپال، استفاده از این انیمیشن‌ها را برای سایت شما آسان می‌سازند. زمانی که وارد لینک می‌شوید، لیستی کامل از تمام انیمیشن‌های موجود در صفحه‌ی ماژول مشاهده می‌کیند که به خوبی نام‌گذاری شده‌اند تا متوجه عملکرد هر انیمیشن بشوید.

در این آموزش شیوه‌ی نصب و استفاده از این کتابخانه در دروپال را به شما خواهیم آموخت. با ما همراه باشید.

گام اول: دانلود کتابخانه

برای این که ماژول انیمیشن کار خود را به درستی انجام دهد، نیاز به نصب سه کتابخانه مجزا داریم. برای نصب این کتابخانهها مراحل زیر را انجام دهید:

  • یک پوشه‌ی «libraries/» در داخل پوشه‌ی روت محل نصب دروپال ایجاد نمایید (پوشه‌ی روت محلی است که پوشه‌ی «core/» در آن قرار دارد).
  • سه پوشه‌ی دیگر در داخل پوشه‌ی «libraries» ایجاد نمایید. نام این پوشه‌ها را با رعایت کردن حروف کوچک و بزرگ به شرح زیر وارد کنید:
    • animateCSS
    • typedJS
    • wowJS

نحوه ساخت انیمیشن‌های CSS و JavaScript در دروپال 8 - طراحی سایت دروپال

  • کتابخانه «animate.css» را از صفحه‌ی گیت هاب آن در این لینک دانلود کنید.
  • فایل زیپ را در داخل پوشه‌ی «animateCSS» قرار داده و در آن‌جا «Extract» کنید.
  • نام پوشه را به شکل «animate.css-master» انجام دهید و اطمینان حاصل نمایید که فایل «animate.min.css» در آن قرار دارد.

نحوه ساخت انیمیشن‌های CSS و JavaScript در دروپال 8 - طراحی سایت دروپال

  • اینک کتابخانه «typed.js» را از این لینک دانلود نمایید.
  • فایل زیپ را در داخل پوشه‌ی «typedJS» قرار دهید.
  • فایل را «Extract» کرده و نام آن را همان «typed.js-master» رها کنید.
  • یک پوشه‌ی «js/» در داخل پوشه‌ی «typed.js-master/» ایجاد نمایید.
  • فایل «typed.js» را از داخل پوشه‌ی «src» به داخل پوشه‌ی «js/» منتقل کنید.

نحوه ساخت انیمیشن‌های CSS و JavaScript در دروپال 8 - طراحی سایت دروپال

  • لایبرری «wowJS» را از این لینک دانلود نمایید.
  • فایل زیپ را در داخل پوشه‌ی «wowJS/» قرار دهید.
  • فایل را اکسترکت کرده و آن را با نام «WOW-master» رها کنید.
  • مطمئن شوید که فایل «wow.min.js» در داخل پوشه‌ی «dist/» قرار داشته باشد.
  • تمام فایل‌های زیپ را حذف نمایید.

نحوه ساخت انیمیشن‌های CSS و JavaScript در دروپال 8 - طراحی سایت دروپال

گام دوم: دانلود و فعال‌سازی ماژول دروپال

با هر روشی که مایل هستید ماژول «Animations» را دانلود کنید. ما برای این کار از «Composer» استفاده کرده‌ایم:

composer require drupal/animations

نحوه ساخت انیمیشن‌های CSS و JavaScript در دروپال 8 - طراحی سایت دروپال 8

بر روی گزینه‌ی «Extend» کلیک کرده، ماژول را فعال نموده و گزینه‌ی «Install» را بزنید.

نحوه ساخت انیمیشن‌های CSS و JavaScript در دروپال 8 - آموزش دروپال فارسی

گام سوم: پیکربندی ماژول Drupal

حال که ماژول فعال شده و تمام لایبرری‌های مورد نیاز در سر جای خود قرار دارند، زمان پیکربندی ماژول رسیده است. بر روی گزینه‌ی «Configuration» کلیک کرده و از بخش «ِDevelopment» گزینه‌ی «Configure animations» را برگزینید.

نحوه ساخت انیمیشن‌های CSS و JavaScript در دروپال 8 - پیکربندی ماژول دروپال 8 فارسی

اگر ساختار تمام پوشه‌ها به درستی انجام شده باشد، صفحه‌ی تنظیمات ماژول «Animations» نمایان خواهد شد. اگر مشکلی وجود داشته باشد نیز سیستم به شما اطلاع خواهد داد تا آن را رفع کنید.

پیکربندی این بخش بسیار ساده است. ابتدا یکی از انیمیشن‌های موجود را برگزیده و سپس یک عنصر در صفحه را از طریق سلکتور CSS مربوطه به آن متصل می‌کنید. برای مثال:

نحوه ساخت انیمیشن‌های CSS و JavaScript در دروپال 8 - آموزش فارسی دروپال 8 و دروپال 9

  • بر روی گزینه‌ی «RUBBERBAND EFFECT» کلیک کرده و عبارت «h1» را در کادر متن وارد کنید.

نحوه ساخت انیمیشن‌های CSS و JavaScript در دروپال 8 - drupal فارسی

  • یک جلوه‌ی دیگر برگزیده و یک سلکتور دیگر نیز وارد نمایید. در مثال زیر، ما از جلوه‌ی «ROTATEINUPRIGHT» استفاده کرده‌ایم. در واقع یک بلوک سفارشی ایجاد کرده‌ایم و آن را در یکی از ریجن‌های مثال خود قرار داده‌ایم، سپس سلکتور (id) کل بلوک را در کادر مربوطه وارد کرده‌ایم.
     
  • بر روی گزینه‌ی «Save changes» کلیک کنید.
  • اینک باید در صفحه‌ی اصلی سایت خود قادر به مشاهده‌ی هر دو انیمیشن‌ها باشید. برای مثال می‌توانید انیمیشن «ROTATEINUPRIGHT» را برای بلوک خود و «RUBBERBAND» را برای تیتر صفحه استفاده کنید.

نحوه ساخت انیمیشن‌های CSS و JavaScript در دروپال 8

پیش نمایش ماژول - نحوه ساخت انیمیشن‌های CSS و JavaScript در دروپال 8

نحوه ساخت انیمیشن‌های CSS و JavaScript در دروپال 8

 

ماژول Animations در دروپال 8 یک راه بسیار ساده برای ایجاد انیمیشن بر روی عناصر خاص در وبسایت فراهم می‌کند. این کار بدون نیاز به هیچ گونه کد نویسی JS یا CSS انجام می‌شود. اگر کمی کدنویسی کنید نیز می‌توانید کنترل بیشتری بر روی عملکرد و رفتار انیمیشن‌ها داشته باشید. برای مثال می‌توانید سرعت، تاخیر و سایر پارامتر‌های مشابه آن‌ها را ویرایش نمایید.

امیدواریم که از این آموزش در دروپالی لذت برده باشید. اگر نیاز به مشاوره در مورد طراحی سایت خود دارید، می‌توانید در تمام ساعات شبانه روز با ما در تماس باشید.

 

نیاز به مشاوره دارید؟

کارشناسان دروپالی در ۷ روز هفته آماده پاسخ دهی به شما عزیزان می باشند. بی صبرانه منتظر شنیدن صدای گرم شما هستیم.

026-36804612

در بحث پیرامون این مقاله شرکت کنید و نظرات خود را بفرمایید.

افزودن دیدگاه جدید

متن ساده

تگ‌های HTML مجاز نیستند.خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.Web page addresses and email addresses turn into links automatically.

مقالات پیشنهادی