10 کد شگفت انگیز سایت Codepen در مارس 2018



visibility  
mode_comment   ۰

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

10 کد شگفت انگیز سایت Codepen در مارس 2018

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

Donut progress bar

در کد Donut progress bar یک نوار پیشرفت یا Progress bar وجود داره که در کنار اون تعدادی تصویر قرار داده شده است. با استفاده از علامت چپ و راست میتونین بین تصاویر جابجا بشید و هر چه به سمت پایین حرکت کنید، نوار پیشرفت هم به سمت پایین میاد.

Energy 3

در کد Energy 3 تعدادی ذره درخشان زیبا در جهت های مختلف در حال حرکت هستند و تغییر رنگ میدن. این ذرات با حالت انیمیشنی زیبایی حرکت میکنن و مشاهده اونا لذت بخش هست.

Just an illusion

در کد Just an illusion شما میتونین با کلیک و درگ کردن ماوستون تعدادی کره رو به وجود بیارید. بعد از این کار اونا بصورت سه بعدی و زیبا حول محور Y به چرخش در میان و یک افکت زیبا رو به وجود میارن.

Look Alive

در کد Look Alive یک چشم سه بعدی با استفاده از WebGL و Three.js ساخته شده که با حرکت دادن ماوس، به دنبال اون حرکت میکنه. افکت های سایه و روشنایی زیبایی به اون اعمال شده است و میتونین از اون ایده بگیرید.

Spiral Art maker

با استفاده از کد Spiral Art maker میتونین الگوهای زیبا و جالبی رو با تغییر دادن مقادیر به وجود بیارید. شما میتونین تعداد خطوط، ضخامت، سرعت رسم شدن و ... رو تغییر بدین. همچنین میتونین با دکمه Random تنظیمات تصادفی جدیدی رو به وجود بیارید. در نهایت هم میتونین اون چیزی که رسم شده رو دانلود و استفاده کنید.

Live Screen Effect

در کد Live Screen Effect یک لپ تاپ قرار داده شده که سایت Codepen رو نشون میده. این کار با استفاده از تابع matrix 3d در CSS انجام شده است. شما میتونین بصورت عادی با این لپ تاپ کار کنید. میتونین سایت خودتون رو به همین شکل درون لپ تاپ قرار بدین.

Tunnel

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

Animated SVG Avatar

در کد Animated SVG Avatar یک آواتار انیمیشنی SVG در بالای فرم ورود قرار داده شده که به رفتارهای مختلفی که در فرم انجام میدید، عکس العمل نشون میده. زمانی که ایمیل رو وارد میکنید خوشحال میشه و زمانی که میخواید رمز رو وارد کنید، چشماشو میگیره. میتونین از این نمونه ایده بگیرید.

3D flashing Moose

در کد 3D flashing Moose یک کاراکتر ساختگی بصورت سه بعدی در حال راه رفتن و حرکت هست. این کاراکتر کیفیت بالایی داره و افکتهای سایه و نور به خوبی در اون اعمال شده است.

Rabbit hit and hide game

در کد Rabbit hit and hide game که یک بازی ساده و جالب هست، 9 جا قرار داره که خرگوش ها ظاهر میشن و فورا بعد از اون مخفی میشن و شما باید در این فاصله به سرعت بر روی اونا کلیک کنید و امتیاز کسب کنید. هر چه تعداد بیشتری رو کلیک کنید، امتیاز بیشتری رو کسب خواهید کرد.

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

Source

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

نیاز به لاگین

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