ایجاد افکت hover دروپالی

در این بخش از آموزش دروپالی خودمون میخواهیم یک سری افکت که موقع hover کردن روی منو ، لینک ها ، دکمه ها یاتصاویر و ...ایجاد میشن رو به سایت دروپالی خودمون اضافه کنیم.
قبل از اینکه آموزش دروپالی خودمون رو شروع کنیم باید بگم که ما میخواهیم از یک کتابخانه (library) که برای افکت hover ایجاد شده استفاده کنیم.در توضیح کتابخانه اگر بخوام خیلی ساده بگم یک سری کد های هم جهت و هم سو (یک موضوع خاص) هستند،که جمع آوری شدن تا بتونیم به راحتی از متدها یا کلاس های موجود در اون کتابخانه استفاده کنیم. بطور مثال در این کتابخانه hover.css یک سری افکت در قالب کلاس های خاص ایجاد و نوشته شدن که دیگه نیازی به این نیست که ما در کدهای خودمون اونها رو بنویسم.
خوب حالا چطور باید از این کتابخانه زیبا و جذاب استفاده کرد ؟ در ابتدا باید کتابخانه رو از اینجا دانلود کنیم. در بین فولدر و فایل های موجود ما فقط نیاز به فولدر css داریم ، در این فولدر دو فایل hover-min.css , hover.css وجود دارد که یکی از اونها رو انتخاب میکنیم.( این دو فایل از نظر محتوا یکسان هستند، فقط از نظر حجم متفاوت هستند)
من فایل hover.css رو در آدرس site/all/theme/css مربوط به سایت خودم آپلود میکنم. تا این لحظه ما فایل رو در جای اصلی خودش قرار دادیم حال باید اون رو فراخوانی کنیم برای این کار فایل info. رو باز میکنیم و فایل مورد نظر رو با دستور زیر که مخصوص فراخوانی فایل css هست ، معرفی میکنیم :
stylesheets[all][] = css/hover.css

 تقریبا به انتهای کار رسیدیم ، فقط باید کلاس افکت دلخواه خودمون رو انتخاب کنیم و به بخش مورد نظر اضافه کنیم. بطور مثال : برای اینکه یک افکت border جذاب ایجاد کنیم کافیه کلاس hvr-overline-from-center رو به li یا تگ a  خودمون اضافه کنیم.
توجه : در فایل مربوط به این کتابخانه فایل demo هم وجود دارد که به راحتی میشه نمونه ها رو اونجا دید و انتخاب کرد.

نکته : کتابخانه های مختلفی وجود دارد که با همین روشی که توضیح داده شد میشه از اونها استفاده کرد ، خیلی از دوستان برنامه نویس ما این کتابخانه ها رو به یک ماژول تبدیل میکنن تا کاربران بتونن استفاده کنند.
در آمورش قبلی  که مربوط به ایجاد انیمیشن بود ،من ماژول دروپالی 
blockanimate رو توضیح دادم که به جای ماژول میشه از کتابخانه مربوط به ایجاد انیمیشن هم استفاده کرد.برای دانلود و استفاده از این کتابخانه میتونید از این قسمت استفاده کنید.
البته خروجی کار در استفاده از کتابخانه ها و ماژول ها یکسان هستش، اما مزیت و معایبی رو حتما این دو روش نسبت به هم دارند که قطعا در آموزش های بعدی به اونها خواهیم پرداخت.

امیدوارم از این آموزش هم در سایت های خودتون خیلی خوب استفاده کنید تا بیش از پیش به جذابیت سایت هاتون اضافه بشه.
موفق باشید

mohamad.arabshahi
محمد عربشاهی - در حال یادگیری
تصویر ساسی
ساسی (تایید نشده)
ی., 04/24/2016 - 19:17

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


تصویر mohamad.arabshahi

دوست عزیز افکت زیر فقط با کد css3 هستش که به تصویر در زمان hover داده شده .
کد زیر رو به تصاویر  در حالت hover اضافه کن :

img:hover {
  opacity: 0.5;
  transform: scale(1.2);
}

برای اینکه این افکت با تأخیر انجام بشه کد زیر رو به تصویر اعمال میکنیم :

img:hover {transition: all 1.15s ease 0s;}

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


مرکز دروپال ايران

راه های ارتباط با ما

آدرس : دفتر شهریار : شهرک وائین ، بعثت 5 نبش سپیدار 10 پلاک 26

تلفن : 09370977406 - 09384363798

ایمیل : drupalcenter.ir@gmail.com

ارتباط با مدیر سایت از طریق تلگرام

logo-samandehi

مرکز دروپال ایران بزرگترین وب سایت  آموزش دروپال در کشور ، در مهر ماه سال 1388 به طور رسمی فعالیت خود را در زمینه وب و دنیای دیجیتال آغاز کرده است. مجموعه مرکز دروپال ایران شامل « آموزش های تصویری » ، « معرفی جدیدترین ماژول ها » ، « ترجمه مقالات دروپالی روز دنیا » ، « طراحی قالب دروپال» و « خبرهای دنیای دروپال» می باشد.این مجموعه به همراه گروه فنی خود و به  پشتوانه کاربران فعال و متعهد ، با  در نظر داشتن چشم اندازی برای آینده نزدیک ، قصد دارد تا به معرفی و آموزش  هرچه بیشتر و بهتر هسته قدرتمند و دوست داشتنی دروپال ،  به روش های مختلف در زمینه های گوناگون بپردازد تا در کنار کاربران خود به موفقیت های هرروز خود بیفزاید. در همین راستا قصد داریم تا بصورت تخصصی و حرفه ای مباحث مختلف دروپال را با کوچک ترین جزئیات و تکنیک ها به دروپال کاران و کسانی که قصد دارند طراحی وب سایت ،پورتال و سیستم های هوشمند را آغاز کنند ، آموزش دهیم.گستردگی مطالب ، تنوع در آموزش ها ، نگاه تخصصی و همگام بودن با کاربران در آموزش عوامل متمایز کردن مرکز دروپال ایران با سایر آموزش دهندگان می باشد.
دروپال برای انجام طراحی های شگفت انگیز !  Drupal Builds something amazing