آموزش ایجاد افکت کم رنگ شدن تصویر با رفتن ماوس به روی آن

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

برای کسانی که هیچ اطلاعاتی در زمینه کار با CSS ندارند هم این را بگوییم که به حالت قرارگیری ماوس بر روی هر چیزی، hover میگوییم و در الان قصد داریم کاری کنیم که تصاویر ما به حالت hover ماوس واکنش دلخواه ما را نشان دهند. کلاس های CSS را نیز به نحوی تنظیم کرده ایم که در صورتی که از یک قالب استاندارد وردپرسی استفاده کنید، به سادگی با کپی و پیست کردن این استایلها در فایل style.css قالبتان میتوانید به نتیجه ی دلخواه دست پیدا کنید.

برای کم رنگ کردن تصویر در هنگام قرار گرفتن ماوس بر روی آن نیاز داریم که opacity آن را تغییر دهیم. برای این کار از کد زیر استفاده میکنیم:

اگر دقت کرده باشید هوای اینترنت اکسپلورر را هم داشتیم و برای آن هم یک خط استایل نوشته ایم که نمایش تصاویرمان در همه مرورگر ها یکسان باشد. توجه داشته باشید که مقدار کم رنگ شدن تصویر را میتوانید با تغییر مقدار نوشته شده در خط دوم و خط سوم تغییر دهید (مقدار ۰٫۶ و عدد ۶۰) تا نتایج دلخواه حاصل شود.

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

سرعت تغییر حالت در تصاویر را میتوانید با تغییر زمان ۰٫۵ ثانیه که در کد بالا درج شده تغییر دهید. هرچه این رقم را بالاتر ببرید (مثلا ۲s) سرعت نمایش افکت کند تر خواهد شد و زمان بیشتری لازم است منتظر بمانید تا افکت به صورت کامل اجرا شود. حواستان باشد که این عدد ۵ بار و برای مرورگر های مختلف در کد بالا تکرار شده است. بنابراین در صورتی که مایلید در آن تغییری ایجاد کنید، حتما هر ۵ عدد را تغییر داده و از معادل بودن آنها اطمینان حاصل کنید.

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

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

Facebook

Twitter

Linkedin