ما را بیابید

نشانی
خیابان ۱۲۳
نیویورک، نیویورک ۱۰۰۰۱

ساعت کاری
شنبه تا چهارشنبه: ۹ صبح تا ۵ بعد از ظهر
پنجشنبه و جمعه: ۱۱ صبح تا ۳ بعد از ظهر

وب

ساخت افکت رنگی در جاوا اسکریپت

افکت رنگی در جاوا اسکریپت

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

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

توابع مورد نیاز برای ایجاد افکت رنگی در جاوا اسکریپت

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

نحوه ایجاد افکت های رنگی با توابع

برای اینکه بدانید دقیقا چه اتفاقی با نوشتن این کد ها رخ می دهد توضیحاتی لازم است. همانطور که گفته شد ما از سه نوع تابع برای ساخت افکت رنگی در جاوا اسکریپت استفاده کرده ایم. تابع اصلی کد ما colorfader است که آرگومان های مختلفی پذیرفته است. با توجه به داده های تعیین شده توسط ما این تابع از دو تابع دیگر به نام coloranimation و colorconvort برای ایجاد افکت رنگی در جاوا اسکریپت استفاده می کند.

نحوه فراخوانی توابع و ایجاد افکت رنگی در جاوا اسکریپت

کد تابع اصلی ما در واقع می تواند سه حالت مختلف از عنصر color در صفحه را کنترل کند. برای این کار ما باید از تگ style در جاوا اسکریپت استفاده کنیم. این تگ سبب می شود که به یک عنصر در صفحه یک ویژگی را به صورت استایل css اعمال کنیم. حالا ما میخواهیم به چهار حالت مختلف توابع را تنظیم و فراخوانی کنیم . به مثال زیر دقت کنید:

کد های تغییر خودکار رنگ پس زمینه

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

 تنظیم تغییر رنگ پس زمینه با کلیک کاربران

در این حالت تابع تصمیم گیرنده عوض شده و اگر کاربری بر روی لینک کلیک کند رنگ پس زمینه تغییر می کند.

تنظیم تغییر رنگ متن با کلیک کاربران

در این حالت اگر کاربری روی متن کلیک کند رنگ متن تغییر می کند.

حالت آخر تغییر رنگ حاشیه یا border به صورت خود کار

در این حالت اگر موس روی بلاک مورد نظر ما قرار گیرد رنگ حاشیه به صورت خود کار تغییر می کند.

 

جمع بندی

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

 

منبع : طراحی سایت

آموزش تک
نویسندهآموزش تک

دیدگاهتان را بنویسید