بهترین کدهای سایت Codepen در سال 2017



visibility  
mode_comment   ۰

در این مطلب بهترین کدهای سایت Codepen در سال 2017 رو در اختیارتون قرار میدم و امیدوارم از اون خوشتون بیاد.بهترین کدهای سایت 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 بازسازی شده. شما باید در جهت های مختلف حرکت کنید و مربع های خاکستری رو بخورید. هر چه قدر که مربع های خاکستری بیشتری خورده میشه مار هم بزرگ و بزرگتر میشه و نباید مار به دیواره ها یا به بدن خودش برخورد کنه.

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

Source

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

نیاز به لاگین

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