عنوان مقاله :

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

گردآوری و تالیف : حسام موسوی
تاریخ انتشار : 13 اردیبهشت 1394
دسته بندی ها : اخبار طراحی

یک آزمایش سرگرم کننده که شما تو این آزمایش میتونید با استفاده از mockup یه وبسایت بخش های مختلفش رو با استفاده از یه پالت رنگ که ازش رنگ ها رو انتخاب و بعد میکشین رو قسمت مورد نظر و بعد رهاش میکنید ، که باعث تغییر رنگ اون قسمت میشه . حالا تو ادامه بیشتر در مورد این ویژگی توضیح میدم . با ما باشید .

امروز ما تصمیم داریم یه ایده ای جالبی رو باهاتون در میونن بزاریم به اسم رنگ آمیزی تعاملی که توسط سایت  tympanus تهیه شده . خب این ایده اینطوری کار میکنه که کاربر بسادگی میتونه از پالت رنگ یه رنگ رو بکشه و اونو تو بخش های یه وبسایت رها کنه اون بخشی که رنگ تو اون رها شده با اون رنگ ، رنگ آمیزی میشه ( حالا میخواد اون قسمت متن باشه یا بکگراند ) . شما ممکنه از ابزار های سفارشی سازی که حتما باهاش مواجه شدید استفاده کنید اما ما قصد داریم با این ایده یه بخش سرگرم کننده به یه وبسایت اضافه کنیم تا کاربر با استفاده از اون بتونه از زمان حضور تو وبسایتتون لذت ببره .

خب حالا که فهمیدید این ایده چیه حالا بهتون میگیم که چطور ازش استفاده کنید : شما میتونید رنگ ها رو از پالت رنگ بکشید و تو هر منطقه ای  روشن که دورش آبی بشه رها کنیداز جمله عناصر متنی . زمانی که یه قطره ای رو میکشیم و تو بخش محتوا ولش میکنیم یه افکتی جالبی که شبیه افکت های تو Material Design ازش استفاده میشه به چشم میخوره و بعد یه دایره کل اون بخش رو رنگ آمیزی میکنه . برای افکت های که تو سایت میبینید از svg و CSS transition استفاده شده است .  

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

ما برای عمل کشیدن و رها کردن از کتابخونه مطرح  interact.js استفاده می کنیم . 

دوستان عزیز لطفا توجه داشته باشین که این ایده کاملا تجربی و فقط برای مرورگر های مدرن جدید قابل استفاده می باشد . پس تو استفاده ازش دقت کنید و همین طور چون مرورگر IE ازcss transitions روی SVG پشتبانی نمیکنه برای همین شما گسترش دایره رو نمی تونید بببنید . 

 شما میتونید این چیزای که گفتم رو تو عکس به راحتی زیر ببینید : 

ممنونم تا اینجای این مقاله کوتاه با ما بودید اگه نظر و پیشنهاد یا انتقادی دارید خوشحال میشیم اونو تو بخش نظرات با ما در میون بزارید با تشکر . 

و همینطور امیدواریم که از این ایده لذت برده باشین و بتونین ازش الهام بگیرید . 

برچسب : ,

مقالات پیشنهادی

Ayu قالب زیبای SublimeText

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

منابع تازه برای طراحان و توسعه دهندگان - شهریور 94

تحولات دیگه بصورت گذشته هر سال یا هر ماه اتفاق نمیوفته بلکه بصورت لحظه ای همه چی متحول میشه این قانون بر اینترنت و طراحی و برنامه نویسی وب هم حکم میکن...

سافاری 9 و هر آنچه که طراحان وب باید در مورد آن بدانند

بحث اصلی کنفرانس اخیر WWDC اپل پیرامون دو سیستم عامل جدید این شرکت بود . el capitan که نسخه ی جدید سیستم عامل میکینتاش است و ios9 . این دو سیستم عام...

تغییرات جدید موتور جستجو گوگل

یکی از قانون های وب مارکتینگ اینکه شما باید همیشه به این باور داشته باشید که هیچ چیزی برای مدت طولانی باقی نمی مونه. خب برای مثال قانون رتبه بندی صفح...

دیدگاه های ارزشمند شما

مهدی | 2 سال پیش

متشکرم خوب بود

admin | 2 سال پیش

خواهش میکنم ! خوشحالم مورد توجهتون قرار گرفت .