درخواست پیش فاکتور

نمونه کار سه بعدی – کد

  • ۱۵ شهریور ۱۳۹۷
  • 100 نفر
  • بدون دیدگاه
  • مجید عابد
 
1 Star2 Stars3 Stars4 Stars5 Stars

نمایش نمونه کارها بصورت 3 بعدی

با سلام خدمت شما کاربران عزیز . امروز برای شما عزیزان طراح وب کد نمونه کار سه بعدی را آماده کرده ایم که میتوانید از آن برای استفاده در سایت خود و بخش نمونه کار ها استفاده کنید . امیدواریم تا انتها با ما همراه باشید .

نمونه کار سه بعدی – کد

این نمونه کار بر اساس Html ، Css و جاوا اسکریپت طراحی شده است . ساختار Html ما از دو عنصر اصلی تشکیل شده است : اول nav.cd-3d-portfolio-navigation برای هدایت بالای پروژه ها و div.projects برای جداسازی پروژه های نمونه کار . درون div.projects سه لیست ul.row برای چرخاندن به صورت موازی وجود دارد :

 

هر ul.row دارای ارتفاعی معادل یک چهارم اندازه صفحه نمایش میباشد . تصویر زیر نمونه ای از انیمیشن سه بعدی سازی این نمونه کار با استفاده از برنامه After Effect میباشد :

نمونه کار سه بعدی

نمونه کار سه بعدی

 

استایل اولیه ما به صورت زیر میباشد :

 

 

زمانی که کاربر بر روی یکی از فیلترهای بالای صفحه کلیک میکند ، هر ul.row به اندازه ظاهرشدن میچرخد . برای هر تک پروژه ، تصویر پیش نمایش پروژه به عنوان پس زمینه عنصر .project-image::before استفاده میشود . این عنصر دارای موقعیت Absoulte و ارتفاع ۲۴۰% اندازه ارتفاع پروژه دارد .

 

 

هندل کردن رویدادها 

برای جاسازی نمونه کار سه بعدی ، از یک شی Portfolio3D و تابع bindEvents برای ضمیمه هندل کننده بهتر عناصر استفاده شده است .

 

دمو نمونه کار سه بعدی به همراه دانلود آن در زیر این مطلب برای شما عزیزان قرار داده شده است که شما میتوانید با دانلود آن و ویرایش کدها از این نمونه کار برای استفاده در سایت خود بهره ببرید .

 

منبع : codyhouse.co

 

دکتر رنک لول رنگ - پالت رنگ های مورد تایید آی وحید درگاه پرداخت واسط jibme