10 نمونه کد جالب سایت Codepen در آپریل 2018

در این مطلب 10 کد جالب سایت Codepen که در آپریل 2018 قرار گرفتن رو در اختیارتون قرار میدیم و امیدوارم که از اونا لذت ببرید و ایده بگیرید.

10 نمونه کد جالب سایت Codepen در آپریل 2018

Glowing Birds

Glowing Birds

در این دمو که بر پایه Canvas ساخته شده یک دسته پرنده رو نشون میده که در حال پرواز هستن و جلوه‌های تصویری و گرافیکی بسیار زیبای رو به نمایش میذارن. طراحی پرندگان، حرکاتشون و دیگر افکت نمایشی به کمک JavaScript و Canvas انجام میشه.

Memory

Memory

Memory یک بازی کلاسیک حافظه ای هست که  با HTML، CSS و JavaScript ایجاد شده. در Memory، بازیکنان باید سعی کنن تصاویر رو که با هم مطابقت دارن به سرعت پیدا کنن تا بتونن امتیاز خوبی رو کسب کنن. 5 تم مختلف در اختیارتون قرار داده شده که می‌تونید بنا به سلیقتون اونا رو انتخاب کنید. این تم‌ها همگی بر اساس برنامه‌های تلویزیونی و سینمایی محبوبه.

Tactris

Tactris یک بازی مشابه tetris هست که می‌تونید اون رو در مرورگرتون بازی کنید و لذت ببرید. شما باید اشکالی که در اختیارتون قرار داده میشه رو به نحوی در صفحه قرار بدید که سطرها و ستون‌ها پر بشن و خونه خالی ما بین اونا باقی نمونه. زمانی که یک سطر کاملا پر شد، اون سطر از بین میره و به شما امتیاز داده میشه. هدف بازی اینه که پر شدن صفحه از اشکال مختلف بشید و هر چقدر که ممکنه بیشتر بازی رو ادامه بدید و امتیاز بیشتری کسب کنید.

Water

Water یک تایمر شمارش معکوس جالب و زیباست که با Two.js ایجاد شده. وقتی تایمر شروع به کار می‌کنه، هر ثانیه صفحه نمایش با آب پر و پرتر می‌شه. شما می‌تونید امواج را به آب اضافه کنید تا اون رو به واقعیت شبیه‌تر و یا حتی چشمگیرتر کنید.

Ziggidy Zaggady

Ziggidy Zaggady یک دموی سرگرم کننده هست که به کمک TypeScript تولید شده است. زمانی که ماوس رو حرکت میدید یا روی صفحه کلیک می‌کنید اشکال زیگزاگ رنگارنگی ایجاد میشه که در صفحه حرکت می‌کنن. این دمو دارای رنگ‌ها و حرکات زیباییست و علاوه بر اون Performance بالایی هم داره.

3D Game Concept

3D Game Concept شما رو به یک جنگل سه بعدی می‌بره که با حرکت ماوس می‌تونید اطرافتون رو ببینید. در این دمو شما می‌تونید یک سری تصاویر سه بعدی بسیار جالب رو با جزئیات خوب، چرخش‌های هموار بدون هیچ گونه کندی و عقب افتادگی (Lag) و رنگ‌های زیبا مشاهده کنید.

CSS Gradient Maker

CSS Gradient Maker

شما می‌تونید از این دمو برای ایجاد گرادیانت‌های متفاوت استفاده کنید. شما می‌تونید رنگ‌ها رو اضافه، حذف کنید و یا این که اونا رو تغییر بدید حتی می‌تونید نوع گرادیانت، شکل و موقعیت مکانی اون رو تغییر بدید. هنگامی که شما نتیجه دلخواهتون رو به دست آوردید می‌توانید کد CSS رو با کلیک بر روی دکمه "GET CSS"  کپی کنید و از اون به طور مستقیم در پروژه خودتون استفاده کنید.

Goldfishes

Goldfishes

این دمو یک استخر پر از آب رو نشون میده که ماهی‌های قرمز توی اون در حال شنا کردن هستن. حرکت ماهی‌ها و یا حرکت نشانگر موس بر روی آب، جلوه‌های موج گونه زیبا و آرومی رو ایجاد می‌کنه. انیمیشن‌ها و افکت‌ها بسیار زیبا، آروم و بدون هیچ گونه کندی و عقب افتادگی (Lag) نمایش داده میشه.

Pacman Login

Pacman Login یک فرم ورود بسیار جالبه که از بازی Pacman الهام گرفته. خطوط، فونت متن و رنگ‌ها این حس رو به شما القا می‌کنن که واقعا در حال بازی هستید. زمانی که شما کلمه عبور رو اشتباه یا درست وارد کنید، انیمیشن‌های متفاوتی رو می‌بینید. کلمه عبور درست pacman می‌باشد.

Custom Image Hover Explode

Custom Image Hover Explode

این دمو یک تکنیک بسیار جالب رو برای هاور کردن بر روی تصاویر به نمایش میذاره. زمانی که نشانگر ماوس رو روی تصاویر قرار میدید، ذرات اطراف تصویر منفجر میشن و یک انیمیشن درخشان، با رنگ‌های چشم نواز و حرکات صاف و آرومی رو می‌بینید.

امیدوارم از این کدها خوشتون اومده باشه.

Source

نویسنده

محمد اسفندیاری

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