معرفی چند کتابخانه پرکاربرد در طراحی قالب های دروپال

library for dtupal theming

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

1- Animate.css

  یک کتابخانه بسیار سبک css که فقط کافیه کلاس انیمیشن مورد نظرمون رو به اون المنت یا بخش دلخواه خودمون بدیم.بطور مثال برای بلوک درباره ما ،  شبکه های اجتماعی یا فرم تماس که در فوتر سایت قرار دادیم.

2- Magic

دقیقا مشابه با کتابخانه animate.css از طریق کلاس های موجود می تونیم انیمیشن دلخواهمون رو فراخوانی کنیم.
نکته :  اگر در صفحه گیت هاب این فایل دقت کنید ، خواهید دید که کد جی کوئری برای اضافه کردن کلاس انیمیشن  دلخواهمون بصورت اتوماتیک به بلوک مورد نظر ، تغییر تاخیر زمانی برای اجرای انیمیشن و تکرار انیمیشن با مثال توضیح داده شده.

3- Hover.css

یک کتابخانه css بسیار پرکاربرد که برای زمانی که میخواهیم hover , focus , active , ... بر روی لینک ها ، منو ، باتن و بقیه المنت ها اتفاق بیفته میتونیم ازش استفاده کنیم.قطعا با کمی ذوق و سلیقه از این کتابخانه استفاده بسیار زیادی رو میتونیم در طراحی های خودمون داشته باشیم.

4 - Anijs

یکی از جذاب ترین کتابخانه هایی که بهش برخوردم این کتابخانه js بود . این کتابخانه مخفف If On To Do هستش.بطور مثال : اگر رخداد کلیک کردن روی منو اتفاق افتاد ، انیمیشن x اتفاق بیفته. و کلی مثال جالب و کاربردی که به راحتی میتونیم از اونها استفاده کنیم.
نکته :  مثال های بسیار زیادی برای این کتابخانه در سایت codepen.io وجود داره ، که در صفحه اصلی لینکش رو قراردادن.

5 - Ripple.js

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

 

خبرنامه دروپال تم

باعضویت در خبرنامه هوشمند دروپال تم از جدیدترین قالب های دروپالی مطلع شوید.

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