در این مطلب 10 کد جالب سایت Codepen که در آپریل 2018 قرار گرفتن رو در اختیارتون قرار میدیم و امیدوارم که از اونا لذت ببرید و ایده بگیرید.
در این دمو که بر پایه Canvas ساخته شده یک دسته پرنده رو نشون میده که در حال پرواز هستن و جلوه های تصویری و گرافیکی بسیار زیبای رو به نمایش میذارن. طراحی پرندگان، حرکاتشون و دیگر افکت نمایشی به کمک JavaScript و Canvas انجام میشه.
Memory
Memory یک بازی کلاسیک حافظه ای هست که با HTML، CSS و JavaScript ایجاد شده. در Memory، بازیکنان باید سعی کنن تصاویر رو که با هم مطابقت دارن به سرعت پیدا کنن تا بتونن امتیاز خوبی رو کسب کنن. 5 تم مختلف در اختیارتون قرار داده شده که می تونید بنا به سلیقتون اونا رو انتخاب کنید. این تم ها همگی بر اساس برنامه های تلویزیونی و سینمایی محبوبه.
Tactris یک بازی مشابه tetris هست که می تونید اون رو در مرورگرتون بازی کنید و لذت ببرید. شما باید اشکالی که در اختیارتون قرار داده میشه رو به نحوی در صفحه قرار بدید که سطرها و ستون ها پر بشن و خونه خالی ما بین اونا باقی نمونه. زمانی که یک سطر کاملا پر شد، اون سطر از بین میره و به شما امتیاز داده میشه. هدف بازی اینه که پر شدن صفحه از اشکال مختلف بشید و هر چقدر که ممکنه بیشتر بازی رو ادامه بدید و امتیاز بیشتری کسب کنید.
Water یک تایمر شمارش معکوس جالب و زیباست که با Two.js ایجاد شده. وقتی تایمر شروع به کار می کنه، هر ثانیه صفحه نمایش با آب پر و پرتر می شه. شما می تونید امواج را به آب اضافه کنید تا اون رو به واقعیت شبیه تر و یا حتی چشمگیرتر کنید.
Ziggidy Zaggady یک دموی سرگرم کننده هست که به کمک TypeScript تولید شده است. زمانی که ماوس رو حرکت میدید یا روی صفحه کلیک می کنید اشکال زیگزاگ رنگارنگی ایجاد میشه که در صفحه حرکت می کنن. این دمو دارای رنگ ها و حرکات زیباییست و علاوه بر اون Performance بالایی هم داره.
3D Game Concept شما رو به یک جنگل سه بعدی می بره که با حرکت ماوس می تونید اطرافتون رو ببینید. در این دمو شما می تونید یک سری تصاویر سه بعدی بسیار جالب رو با جزئیات خوب، چرخش های هموار بدون هیچ گونه کندی و عقب افتادگی (Lag) و رنگ های زیبا مشاهده کنید.
شما می تونید از این دمو برای ایجاد گرادیانت های متفاوت استفاده کنید. شما می تونید رنگ ها رو اضافه، حذف کنید و یا این که اونا رو تغییر بدید حتی می تونید نوع گرادیانت، شکل و موقعیت مکانی اون رو تغییر بدید. هنگامی که شما نتیجه دلخواهتون رو به دست آوردید می توانید کد CSS رو با کلیک بر روی دکمه "GET CSS" کپی کنید و از اون به طور مستقیم در پروژه خودتون استفاده کنید.
این دمو یک استخر پر از آب رو نشون میده که ماهی های قرمز توی اون در حال شنا کردن هستن. حرکت ماهی ها و یا حرکت نشانگر موس بر روی آب، جلوه های موج گونه زیبا و آرومی رو ایجاد می کنه. انیمیشن ها و افکت ها بسیار زیبا، آروم و بدون هیچ گونه کندی و عقب افتادگی (Lag) نمایش داده میشه.
Pacman Login یک فرم ورود بسیار جالبه که از بازی Pacman الهام گرفته. خطوط، فونت متن و رنگ ها این حس رو به شما القا می کنن که واقعا در حال بازی هستید. زمانی که شما کلمه عبور رو اشتباه یا درست وارد کنید، انیمیشن های متفاوتی رو می بینید. کلمه عبور درست pacman می باشد.
این دمو یک تکنیک بسیار جالب رو برای هاور کردن بر روی تصاویر به نمایش میذاره. زمانی که نشانگر ماوس رو روی تصاویر قرار میدید، ذرات اطراف تصویر منفجر میشن و یک انیمیشن درخشان، با رنگ های چشم نواز و حرکات صاف و آرومی رو می بینید.
امیدوارم از این کدها خوشتون اومده باشه.
