دسته بندی :
تاریخ انتشار : ۱۳ اردیبهشت ۱۳۹۴
گردآوری و تالیف : حسام موسوی

کارمو با طراحی گرافیکی شروع کردم و حدود 2 سال طراحی گرافیکی میکردم بعد به طراحی وب علاقه پیدا کردم و همراه طراحی وب عاشق کدنویسی شدم به PHP | sass | css | Jquery | javaScript تسلط کامل دارم . در بین فریم ورک های PHP اول با CodeIgniter کار کردم اما به laravel علاقه مند شدم و دارم بطور حرفه ای دنبالش میکنم . امید من اینکه بتونم کاربرهای ایرانی رو به دنیای بیرون متصل کنم تا بتونن از فناوری های تازه آگاهی داشته باشن

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

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

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

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

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

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

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

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

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

برچسب : , ,

دیدگاه های مخاطبین

ثبت دیدگاه شما
  • مهدی

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

    • admin

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

پیشنهاد میکنیم این مطالب رو هم مطالعه کنید :