这是一款效果非常炫酷的 jQuery 和 CSS3 3D 旋转项目展示模板。该模板通过 CSS3 3D transform 来制作 3D 立方体的旋转效果,使各个项目在切换时呈现立方体旋转效果。
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>
为了实现 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
//..
}
});
//...
};
演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务,详询在线客服!