3D Folding Panel 3D 褶皱效果 项目简介
3D Folding Panel 是一款 CSS 转换和 jQuery 提供动力的次要内容面板。能够渲染 3D 褶皱效果。支持 IE、Chrome、firefox、Safari、Opera。创建结构:<main class="cd-main">
<ul class="cd-gallery">
<li class="cd-item">
<a href="item-1.html">
<div>
<h2>Title 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur.</p>
<b>View More</b>
</div>
</a>
</li>
<li class="cd-item">
<!-- content here -->
</li>
<!-- additional list items here -->
</ul> <!-- .cd-gallery -->
</main> <!-- .cd-main -->
<div class="cd-folding-panel">
<div class="fold-left"></div> <!-- this is the left fold -->
<div class="fold-right"></div> <!-- this is the right fold -->
<div class="cd-fold-content">
<!-- content will be loaded using javascript -->
</div>
<a class="cd-close" href="#0"></a>
</div> <!-- .cd-folding-panel -->添加样式:.cd-main {
overflow-x: hidden;
}
.cd-main > * {
transition: transform 0.5s 0.4s;
}
.cd-main.fold-is-open > * {
/* on mobile - translate .cd-main content to the right when the .cd-folding-panel is open */
transform: translateX(100%);
transition: transform 0.5s 0s;
}
.cd-folding-panel {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
visibility: hidden;
overflow: hidden;
transition: visibility 0s 0.9s;
}
.cd-folding-panel .fold-left,
.cd-folding-panel .fold-right {
/* the :after elements of .fold-left and .fold-right are the 2 fold sides */
width: 100%;
height: 100vh;
overflow: hidden;
/* enable a 3D-space for children elements */
perspective: 2000px;
}
.cd-folding-panel .fold-right {
perspective-origin: 0% 50%;
}
.cd-folding-panel .fold-left {
/* on mobile only the right fold side is visible */
display: none;
}
.cd-folding-panel .fold-right::after {
/* 2 fold sides */
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transform-origin: right center;
transform: translateX(-100%) rotateY(-90deg);
transition: transform 0.5s 0.4s, background-color 0.5s 0.4s;
}
.cd-folding-panel.is-open {
visibility: visible;
transition: visibility 0s 0s;
}
.cd-folding-panel.is-open .fold-right::after {
transform: translateX(0);
transition: transform 0.5s 0s, background-color 0.5s 0s;
}@media only screen and (min-width: 1100px) {
.cd-item {
width: 50%;
float: left;
transition: transform 0.5s 0.4s;
}
.fold-is-open .cd-item {
transition: transform 0.5s 0s;
transform: translateX(-400px);
}
.fold-is-open .cd-item:nth-of-type(2n) {
transform: translateX(400px);
}
}
@media only screen and (min-width: 1100px) {
.cd-folding-panel {
left: 50%;
transform: translateX(-50%);
width: 800px;
}
.cd-folding-panel .fold-left,
.cd-folding-panel .fold-right {
width: 50%;
float: left;
height: 100%;
}
.cd-folding-panel .fold-right {
/* change perspective-origin so that the 2 fold sides have the same vanishing point */
perspective-origin: 0% 50%;
}
.cd-folding-panel .fold-right::after {
transform-origin: right center;
transform: translateX(-100%) rotateY(-90deg);
}
.cd-folding-panel .fold-left {
display: block;
/* change perspective-origin so that the 2 fold sides have the same vanishing point */
perspective-origin: 100% 50%;
}
.cd-folding-panel .fold-left::after {
transform-origin: left center;
transform: translateX(100%) rotateY(90deg);
}
.cd-folding-panel.is-open .fold-right::after,
.cd-folding-panel.is-open .fold-left::after {
transform: translateX(0);
transition: transform 0.5s 0s, background-color 0.5s 0s;
}
}.cd-folding-panel .fold-right {
perspective-origin: 0% 50%;
}
.cd-folding-panel .fold-left {
perspective-origin: 100% 50%;
}事件处理:/* open folding content */
$('.cd-gallery a').on('click', function(event){
event.preventDefault();
openItemInfo($(this).attr('href'));
});
function openItemInfo(url) {
/* check if mobile or desktop */
var mq = viewportSize();
if( $('.cd-gallery').offset().top > $(window).scrollTop() && mq != 'mobile') {
/* if content is visible above the .cd-gallery - scroll before opening the folding panel */
$('body,html').animate({
'scrollTop': $('.cd-gallery').offset().top
}, 100, function(){
toggleContent(url, true);
});
} else {
toggleContent(url, true);
}
}
function toggleContent(url, bool) {
if( bool ) {
/* load and show new content */
$('.cd-fold-content').load(url+' .cd-fold-content > *', function(event){
$('body').addClass('overflow-hidden');
$('.cd-folding-panel').addClass('is-open');
$('.cd-main').addClass('fold-is-open');
});
} else {
/* close the folding panel */
$('.cd-folding-panel').removeClass('is-open')
$('.cd-main').removeClass('fold-is-open');
/* ...*/
}
}
<ul class="cd-gallery">
<li class="cd-item">
<a href="item-1.html">
<div>
<h2>Title 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur.</p>
<b>View More</b>
</div>
</a>
</li>
<li class="cd-item">
<!-- content here -->
</li>
<!-- additional list items here -->
</ul> <!-- .cd-gallery -->
</main> <!-- .cd-main -->
<div class="cd-folding-panel">
<div class="fold-left"></div> <!-- this is the left fold -->
<div class="fold-right"></div> <!-- this is the right fold -->
<div class="cd-fold-content">
<!-- content will be loaded using javascript -->
</div>
<a class="cd-close" href="#0"></a>
</div> <!-- .cd-folding-panel -->添加样式:.cd-main {
overflow-x: hidden;
}
.cd-main > * {
transition: transform 0.5s 0.4s;
}
.cd-main.fold-is-open > * {
/* on mobile - translate .cd-main content to the right when the .cd-folding-panel is open */
transform: translateX(100%);
transition: transform 0.5s 0s;
}
.cd-folding-panel {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
visibility: hidden;
overflow: hidden;
transition: visibility 0s 0.9s;
}
.cd-folding-panel .fold-left,
.cd-folding-panel .fold-right {
/* the :after elements of .fold-left and .fold-right are the 2 fold sides */
width: 100%;
height: 100vh;
overflow: hidden;
/* enable a 3D-space for children elements */
perspective: 2000px;
}
.cd-folding-panel .fold-right {
perspective-origin: 0% 50%;
}
.cd-folding-panel .fold-left {
/* on mobile only the right fold side is visible */
display: none;
}
.cd-folding-panel .fold-right::after {
/* 2 fold sides */
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transform-origin: right center;
transform: translateX(-100%) rotateY(-90deg);
transition: transform 0.5s 0.4s, background-color 0.5s 0.4s;
}
.cd-folding-panel.is-open {
visibility: visible;
transition: visibility 0s 0s;
}
.cd-folding-panel.is-open .fold-right::after {
transform: translateX(0);
transition: transform 0.5s 0s, background-color 0.5s 0s;
}@media only screen and (min-width: 1100px) {
.cd-item {
width: 50%;
float: left;
transition: transform 0.5s 0.4s;
}
.fold-is-open .cd-item {
transition: transform 0.5s 0s;
transform: translateX(-400px);
}
.fold-is-open .cd-item:nth-of-type(2n) {
transform: translateX(400px);
}
}
@media only screen and (min-width: 1100px) {
.cd-folding-panel {
left: 50%;
transform: translateX(-50%);
width: 800px;
}
.cd-folding-panel .fold-left,
.cd-folding-panel .fold-right {
width: 50%;
float: left;
height: 100%;
}
.cd-folding-panel .fold-right {
/* change perspective-origin so that the 2 fold sides have the same vanishing point */
perspective-origin: 0% 50%;
}
.cd-folding-panel .fold-right::after {
transform-origin: right center;
transform: translateX(-100%) rotateY(-90deg);
}
.cd-folding-panel .fold-left {
display: block;
/* change perspective-origin so that the 2 fold sides have the same vanishing point */
perspective-origin: 100% 50%;
}
.cd-folding-panel .fold-left::after {
transform-origin: left center;
transform: translateX(100%) rotateY(90deg);
}
.cd-folding-panel.is-open .fold-right::after,
.cd-folding-panel.is-open .fold-left::after {
transform: translateX(0);
transition: transform 0.5s 0s, background-color 0.5s 0s;
}
}.cd-folding-panel .fold-right {
perspective-origin: 0% 50%;
}
.cd-folding-panel .fold-left {
perspective-origin: 100% 50%;
}事件处理:/* open folding content */
$('.cd-gallery a').on('click', function(event){
event.preventDefault();
openItemInfo($(this).attr('href'));
});
function openItemInfo(url) {
/* check if mobile or desktop */
var mq = viewportSize();
if( $('.cd-gallery').offset().top > $(window).scrollTop() && mq != 'mobile') {
/* if content is visible above the .cd-gallery - scroll before opening the folding panel */
$('body,html').animate({
'scrollTop': $('.cd-gallery').offset().top
}, 100, function(){
toggleContent(url, true);
});
} else {
toggleContent(url, true);
}
}
function toggleContent(url, bool) {
if( bool ) {
/* load and show new content */
$('.cd-fold-content').load(url+' .cd-fold-content > *', function(event){
$('body').addClass('overflow-hidden');
$('.cd-folding-panel').addClass('is-open');
$('.cd-main').addClass('fold-is-open');
});
} else {
/* close the folding panel */
$('.cd-folding-panel').removeClass('is-open')
$('.cd-main').removeClass('fold-is-open');
/* ...*/
}
}