در این مطلب بهترین کدهای سایت Codepen در سال 2017 رو در اختیارتون قرار میدم و امیدوارم از اون خوشتون بیاد.
بهترین کدهای سایت Codepen در سال 2017
The last experience
The last experience یک نسخه نمایشی جالب هست که تعدادی ربات انسان نما رو در حال حرکت نشون میده. شما میتونید این ربات‌ها رو بچرخونید، اون‌ها رو حرکت بدید و حتی اونا رو با موس بکشید.
I Could Not Stop
I Could Not Stop یه نمونه از دموهای جالب محسوب میشه که در اون شما میتونید یک تصویر رو به قطعات کوچکتر تبدیل کنید. البته شما هیچ محدودیتی در انجام این تقسیمات ندارید و میتونید هزار بار هم این کار رو تکرار کنید. هر بار که بر روی هر قطعه از تصاویر کلیک کنید، در اون محل چهار تصویر کوچکتر و جدید ایجاد میشه.
Trees
در Trees شما میتونید درختان رنگارنگ زیبا و زیادی رو بسازید. زمانی که روی صفحه کلیک می‌کنید یک درخت جدید رو با شکل و رنگ جدید ایجاد می‌کنید. شما میتونید هر چه قدر که دوست دارید از این درخت‌ها تولید کنید. البته زمانی که شما یه درخت جدید تولید می‌کنید، یکی از اون قدیمی ترها محو میشه.
Star Wars characters
در Star Wars characters یک تصویر SVG رو نشون میده که هر بار اندازه عرض صفحه نمایش رو تغییر بدید به کمک جستجو در مدیا اون تصویر رو با یک تصویر دیگه عوض میکنه.
Winter Tiding
Winter Tiding شما رو به یک جنگل سحرآمیز میبره که در اون شما ارواح جنگل رو به یک جشن دعوت می‌کنید. بعد از اون شما با ساختن یک گلوله برفی پیام جشنتون رو به همه جای جهان می‌رسونید. این دمو دارای رنگ‌ها و تصاویر زیبا، انیمیشن‌های صاف و موسیقی پس زمینه بسیار آرومی هست.
Canvas Orbital Trails
کد Canvas Orbital Trails بسیار جذاب و سرگرم کننده هست که یک سری حرکات پشت سر هم و دنباله دار جالب رو نشون میده. این دنباله‌ها رنگ‌های بسیار جذاب و حرکات صافی دارن که شما میتونید با کلیک کردن و کشیدن، مسیرهای رنگی بیشتری به اون اضافه کنید.
Showcase Car
Showcase Car یک دموی سه بعدی بسیار جذاب از یک ماشینه که فقط به کمک CSS ساخته شده. این خودرو دارای جزییات و افکت‌ها و سایه روشن‌های جالبی هست. شما میتونید پنجره‌ها رو بالا و پایین کنید، درها رو باز و بسته کنید، اون‌ها رو به دلخواه خودتون سفارش بدید، چراغ‌های جلو رو خاموش و روشن کنید و حتی ماشین رو روی یک مسیر دایره ای به حرکت در بیارید.
Rainbow Star Wave
Rainbow Star Wave امواج جالب و رنگارنگی در حال حرکت و پریدن در اطراف رو نشون میده. این دمو فقط با استفاده از HTML و CSS طراحی شده. شما میتونید این کد رو مستقیما در ویرایشگر CodePen استفاده کنید تا شکل‌ها و انیمیشن‌های مختلفی رو ببینید.
The Color Average
The Color Average یک دموی کاربردی محسوب میشه که به شما این امکان رو میده که نتیجه ترکیب دو رنگ رو ببینید. شما باید از قسمتی که لیست رنگ‌ها قرار داده شده دو رنگ رو انتخاب کنید و نتیجه رو به عنوان رنگ پس زمینه پنجره مشاهده کنید.
Chill the Lion
Chill the Lion یک آزمایش WebGL هست که به کمک ThreeJs ساخته شده. این دمو شامل یک گرافیک پیکسلی از یک شیر و یک فن هست که شما میتونید با استفاده از موس میزان باد رو برای شیر تنظیم کنید. این کار بسیار جالب و لذت بخشه.
Squarebreath
در Squarebreath شما یک سری مربع‌های رنگی رو می‌بینید که بعضی از انیمیشن‌های جالب رو مثل انتقال انجام میدن. این انیمیشن‌ها یا جابجایی‌ها به نحوی تنظیم و هماهنگ میشن که یک اثر موج گونه رو ایجاد می‌کنن. تمام انیمیشن‌ها به کمک CSS Keyframes و Transform و تاخیر ساخته شده.
TinyPolyWorld
TinyPolyWorld یک دموی سه بعدی از پرواز هواپیماست که با Three.js تولید میشه. شما میتونید هواپیما رو به وسیله موس در حالی که داره توی یک محیط سه بعدی بسیار زیبا پرواز میکنه جابجا کنید. این دمو شامل یک سری سایه‌های پویا و رنگ‌های بسیار زیبا و آرامش بخش هست.
Super Speed Snowmountain Survival
Super Speed Snowmountain Survival یک بازی کوچک و سرگرم کننده هست که شما در پایین یک کوه اسیر شدید و تلاش می‌کنید که از ضربه درختان در امان باشید و تا جایی که ممکن هست زنده بمونید. این دمو دارای حرکات صاف با کیفیت بسیار بالایی هست. این بازی بسیار جالبه و شما رو تشویق میکنه که برای بهبود امتیازتون تلاش کنید.
4D Perspective
4D Perspective یک دموی بسیار جالب چهاربعدی است و دارای حرکاتی با کیفیت بالا، افکت رعد و برقی، رنگ‌های زیبا و انیمیشن‌ها و جابجایی‌های فوق العاده شگفت انگیز هست.
Snake game
این دمو همون بازی محبوب Snake هست که به کمک CSS و JS بازسازی شده. شما باید در جهت‌های مختلف حرکت کنید و مربع‌های خاکستری رو بخورید. هر چه قدر که مربع‌های خاکستری بیشتری خورده میشه مار هم بزرگ و بزرگتر میشه و نباید مار به دیواره‌ها یا به بدن خودش برخورد کنه.
امیدوارم که از این موارد خوشتون اومده باشه.
اولین دیدگاه این پست رو تو بنویس !