jQuery 및 CSS3 3D 회전 프로젝트 표시 템플릿

간단한 튜토리얼

이것은 매우 멋진 jQuery 및 CSS3 3D 회전 프로젝트 표시 템플릿입니다. 이 템플릿은 CSS3 3D 변환을 사용하여 3D 큐브 회전 효과를 생성하므로 각 항목이 전환될 때 큐브 회전 효과가 표시됩니다.

사용법

HTML 구조

HTML 구조는 두 부분으로 구성됩니다. nav.cd-3d-portfolio-navigation은 프로젝트 탐색이고, div.projects는 다음을 사용합니다. 각 패키지 품목마다.

<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>

JavaScript

3D 효과를 구현하기 위해 템플릿에 Portfolio3D 개체를 생성하고 이벤트를 바인딩하는 데 binEvents 함수를 사용합니다.

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)));
  });
}

visibleFace 속성은 큐브의 현재 보이는 면을 저장하는 데 사용됩니다.

사용자가 특정 항목 유형을 회전하면 showNewContent() 메서드를 사용하여 올바른 큐브 면을 표시하고 ul.row의 요소를 회전합니다.

Portfolio3D.prototype.bindEvents = function() {  
var self = this;    
this.navigation.on('click', 'a:not(.selected)', function(event){    
//update visible projects when clicking on the filter    
event.preventDefault();    
if( !self.animating ) {      
self.animating = true;      
var index = $(this).parent('li').index();             
//show new projects      
self.showNewContent(index);        
//update filter selected element      
//..    
}  
});    
//...
};

위 내용은 jQuery 및 CSS3 3D 회전 프로젝트 표시 템플릿의 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!