jQuery和CSS3 3D旋转项目展示模板

当前位置:主页 > CSS3库 > UI界面设计 > jQuery和CSS3 3D旋转项目展示模板
jQuery和CSS3 3D旋转项目展示模板
分享:

    插件介绍

    这是一款效果非常炫酷的jQuery和CSS3 3D旋转项目展示模板。该模板通过CSS3 3D transform来制作3D立方体的旋转效果,使各个项目在切换时呈现立方体旋转效果。

    浏览器兼容性

    浏览器兼容性
    时间:2016-09-21
    阅读:
简要教程

这是一款效果非常炫酷的jQueryCSS3 3D旋转项目展示模板。该模板通过CSS3 3D transform来制作3D立方体的旋转效果,使各个项目在切换时呈现立方体旋转效果。

使用方法

HTML结构

HTML结构包括2个部分: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对象,并使用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)));
  });
}             
                

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

网友评论