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

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

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

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

<div class="cd-3d-portfolio">
   <nav class="cd-3d-portfolio-navigation">
      <div class="cd-wrapper">
         <h1>3D Portfolio Template</h1>
         <ul>
            <li><a href="#0" class="selected">Filter 1</a></li>
            <li><a href="#0">Filter 2</a></li>
            <li><a href="#0">Filter 3</a></li>
         </ul>
      </div>
   </nav> <!-- .cd-3d-portfolio-navigation -->
  
   <div class="projects">
      <ul class="row">
         <li class="front-face selected project-1">
            <div class="project-wrapper">
               <div class="project-image">
                  <div class="project-title">
                     <h2>Project 1</h2>
                  </div>
               </div> <!-- .project-image -->

               <div class="project-content">
                  <!-- project content here -->
               </div> <!-- .project-content -->

               <a href="#0" class="close-project">Close</a>
            </div> <!-- .project-wrapper -->
         </li>

         <li class="right-face project-2">
            <div class="project-wrapper">
               <div class="project-image">
                  <div class="project-title">
                     <h2>Project 2</h2>
                  </div>
               </div> <!-- .project-image -->

               <div class="project-content">
                  <!-- project content here -->
               </div> <!-- .project-content -->

               <a href="#0" class="close-project">Close</a>
            </div> <!-- .project-wrapper -->
         </li>

         <li class="right-face project-3">
            <div class="project-wrapper">
               <div class="project-image">
                  <div class="project-title">
                     <h2>Project 3</h2>
                  </div>
               </div> <!-- .project-image -->

               <div class="project-content">
                  <!-- project content here -->
               </div> <!-- .project-content -->

               <a href="#0" class="close-project">Close</a>
            </div> <!-- .project-wrapper -->
         </li>
      </ul> <!-- .row -->
  
      <ul class="row">
         <!-- projects here -->
      </ul> <!-- .row -->
  
      <ul class="row">
         <!-- projects here -->
      </ul> <!-- .row -->
   </div><!-- .projects -->
</div>

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

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

.cd-3d-portfolio .projects .row {
  height: 25vh;
  position: relative;
  z-index: 1;
  /* position its children in a 3d space */
  transform-style: preserve-3d;
  transform: translateZ(-50vw);
  transition: transform 0.6s cubic-bezier(0.5, 0, 0.1, 1);
}

.cd-3d-portfolio .projects .row > li {
  /* this is the single project */
  position: absolute;
  z-index: 1;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.cd-3d-portfolio .projects .row > li.front-face {
  transform: translateZ(50vw);
}
.cd-3d-portfolio .projects .row > li.right-face {
  transform: rotateY(90deg) translateZ(50vw);
}
.cd-3d-portfolio .projects .row > li.left-face {
  transform: rotateY(-90deg) translateZ(50vw);
}
.cd-3d-portfolio .projects .row > li.back-face {
  transform: rotateY(180deg) translateZ(50vw);
}

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

.cd-3d-portfolio .projects .project-image {
  position: relative;
  width: 100%;
  height: 25%;
  transition: transform 0.6s;
}
.cd-3d-portfolio .projects .project-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  height: 240%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.cd-3d-portfolio .projects .project-content {
  position: absolute;
  /* place the content right below the project image */
  top: 60%;
  width: 100%;
  background: white;
}

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

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

function Portfolio3D( element ) {
   //define a Portfolio3D object
   this.element = element;
   this.navigation = this.element.children('.cd-3d-portfolio-navigation');
   this.rowsWrapper = this.element.children('.projects');
   this.rows = this.rowsWrapper.children(\.row');
   this.visibleFace = 'front';
   this.visibleRowIndex = 0;
   this.rotationValue = 0;
   //animating variables
   this.animating = false;
   this.scrolling = false;
   // bind portfolio events
   this.bindEvents();
}

if( $('.cd-3d-portfolio').length > 0 ) {
   var portfolios3D = [];
   $('.cd-3d-portfolio').each(function(){
      //create a Portfolio3D object for each .cd-3d-portfolio
      portfolios3D.push(new Portfolio3D($(this)));
   });
}

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

منبع : codyhouse.co