رنگ‌آمیزی تعاملی جالب و سرگرم کننده سایت‌ها
یک آزمایش سرگرم کننده که شما تو این آزمایش میتونید با استفاده از mockup یه وبسایت بخش‌های مختلف‌ش رو با استفاده از یه پالت رنگ تغییر بدین. اینکار با انتخاب و درگ کردن رنگ رو قسمت مورد نظر انجام می‌شه و باعث تغییر رنگ اون قسمت می‌شه. حالا تو ادامه بیشتر در مورد ویژگی رنگ‌آمیزی تعاملی توضیح می‌دم .با ما باشید .
امروز ما تصمیم داریم یه ایده‌ی جالبی رو باهاتون در میون بزاریم، به اسم رنگ‌آمیزی تعاملی که توسط سایت tympanus تهیه شده. خب این ایده اینطوری کار می‌کنه که کاربر به سادگی می‌تونه از پالت رنگ یه رنگ رو بکشه و اونو تو بخش‌های یه وبسایت رها کنه. اون بخشی که رنگ تو اون رها شده با اون رنگ، رنگ‌آمیزی می‌شه (حالا میخواد اون قسمت متن باشه یا پس‌زمینه). شما ممکنه از ابزارهای سفارشی‌سازی که حتما باهاش مواجه شدید استفاده کنید. اما ما قصد داریم با این ایده یه بخش سرگرم کننده به یه وبسایت اضافه کنیم تا کاربر با استفاده از اون بتونه از زمان حضور تو وبسایت لذت ببره.
خب حالا که متوجه شدین این ایده چیه حالا بهتون می‌گیم که چطور ازش استفاده کنید: شما میتونید رنگ‌ها رو از پالت رنگ بکشید و تو هر منطقه‌ای روشن که دورش آبی بشه رها کنیداز جمله عناصر متنی. زمانی که یه قطره‌ای رو می‌کشیم و تو بخش محتوا رها می‌کنیم یه افکت جالبی که شبیه افکت‌های تو Material Design ازش استفاده می‌شه به چشم می‌خوره. بعد یه دایره کل اون بخش رو رنگ‌آمیزی می‌کنه. برای افکت‌هایی که تو سایت می‌بینید از svg و CSS transition استفاده شده است .
شما میتونید با کلیک روی قطره تو پالت رنگ همه ای کارای که تو سایتتون انجام دادینو ریست کنید خیلی راحت .
ما برای عمل کشیدن و رها کردن از کتابخونه مطرح interact.js استفاده می کنیم .
دوستان عزیز لطفا توجه داشته باشین که این ایده کاملا تجربی بوده و فقط برای مرورگرهای مدرن جدید قابل استفاده می‌باشد . پس تو استفاده ازش دقت کنید و همین طور چون مرورگر IE ازcss transitions روی SVG پشتبانی نمی‌کنه برای همین شما گسترش دایره رو نمی‌تونید بببنید .
شما میتونید این چیزای که گفتم رو تو عکس به راحتی زیر ببینید :
ممنونم تا اینجای این مقاله کوتاه با ما بودید اگه نظر و پیشنهادی دارید خوشحال می‌شیم تو بخش نظرات با ما در میون بزارید.
و همینطور امیدواریم که از این ایده لذت برده باشین و بتونین ازش الهام بگیرید .
منبع: راکت