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



visibility  
mode_comment   ۰

در این مطلب 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

متخصص جاوا اسکریپت
با جاوا اسکریپت جادوگری کنید! آیا می دونید با زبان جاوااسکریپت می تونید، برای فرانت اند و بک اند وبسایت ها برنامه نویسی کنید؟ همینطور اپلیکیشن دسکتاپ و موبایل بسازید؟ اگر دوست داری اینکارها رو انجام بدی و React, ElectronJS, ReactNative, NodeJS,MongoDB و ... رو تو یه دوره یاد بگیری، متخصص جاوااسکریپت سون لرن رو حتما ببین : متخصص جاوا اسکریپت arrow_back

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

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.