ایجاد انیمشن برای بلوک ها

در این آموزش دروپالی قصد داریم تا یک امکان جذاب و کاربر پسند رو در سایت دروپالی خودمون پیاده سازی کنیم ، به نوعی نحوه نمایش مطالب در صفحه اصلی سایت دروپالی (front page)خودمون تغییر بدیم.

قطعا سایت هایی رو مشاهده کردید که با افکت های خاصی مطالب رو نمایش میدن ، بطور مثال مطالب از جهت های مختلف وارد سایت میشن ، یک چرخش به دور خودشون دارن و یا اینکه موقع نمایش در سایت در یک بازه زمانی خیلی کوتاه محو میشن و دوباره نمایش داده میشن.
مانند سایت : نمونه اول ، نمونه دوم
استفاده از این افکت و یا انیمیشن ها باعث جذابیت بیشتر شده ولی توجه داشته باشید که استفاده از انیمیشن ها بیشتر در صفحه اصلی اتفاق میفته و نباید با استفاده بیش از حد کاربران رو اذیت کنیم. :)
قبل از اینکه آموزش دروپالی خودمون رو شروع کنیم ، این  نکته رو بگم که برای پیاده سازی هر امکانی در سایت دروپالی روش های مختلفی وجود داره که من سعی میکنم یکی از اون روش ها رو که اکثرا با ماژول هستش رو خدمتتون توضیح بدم.قطعا در آموزش های بعدی سعی خواهیم کرد که کمتر از ماژول ها استفاده کنیم و با استفاده از کدنویسی به نتیجه مورد نظر برسیم.

اما ماژول این هفته blockanimate هست که همان طور که از اسمش مشخص هست با استفاده از این ماژول میتونیم انیمیشن های مختلفی رو به بلوک های خودمون میتونیم اعمال کنیم.
برای شروع کار ماژول رو دانلود کنیم ، همونطور که در توضیحات این ماژول نوشته شده ما به دوتا ماژول دیگه که پیش نیازهای ما هستند احتیاج داریم.ماژول animate_css  , wowjs که در اصل این دوتا ماژول کلاس های css3 برای انیمیشن و کتابخانه های جاوااسکریپت رو برای ماژول اصلی فراخوانی میکنند.
نکته : ماژول های پیش نیاز ما ، یک سری فایل کمکی دارن که باید در فولدر library  به صورت زیر قرار داده شوند   :
فایل کمکی animate که باید در آدرس sites/all/libraries/animate   و
فایل کمکی wow که باید در آدرس sites/all/libraries/wow .

بعد از دانلود و فعال کردن ماژول ها و قراردادن فایل های کمکی در پوشه library ، تنها کاری که باید انجام بدیم این هست که بلوک دلخواه رو انتخاب کنید و به بخش تنطیماتش (config) برید. اگر دقت کنید یک  بخش جدید با نام ANIMATE CSS ANIMATION  اضافه شده که قسمت های مختلفی داره که ما  توضیح خواهیم داد :

Select Animation : در این بخش نوع انیمیشن دلخواه رو انتخاب میکنیم.
Animation Duration : مدت زمان اجرای انیمیشن
Animation Delay : تأخیر اجرای انیمیشن
و تنظیماتی برای تکرار و فاصله بلوک ها.
 امیدوارم این آموزش هم مفید بوده باشه و بتونید ازش استفاده کنید.
منتظر پیشنهادات شما برای آموزش های دروپالی هستیم.