عنوان مقاله :

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

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

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

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

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

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

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

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

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

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

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

برچسب : ,

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

وب سایت های الهام بخش برای طراحی - سری ششم

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

وب سایت های الهام بخش برای طراحی | سری سوم

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

وب سایت های الهام بخش برای طراحی - سری 9

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

وب سایت های الهام بخش برای طراحی | هفته سوم خرداد

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

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

برای ارسال نظر لازم است ابتدا وارد سایت شوید
مهدی | 3 سال پیش

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

admin | 3 سال پیش

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