以下是 jQuery三维折叠面板展开收缩特效 的示例演示效果:
部分效果截图1:
部分效果截图2:
HTML代码(index.html):
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="gb2312">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery��ά�۵����չ��������Ч</title>
<link href='http://fonts.useso.com/css?family=Vollkorn|Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
</head>
<body>
<main class="cd-main">
<header>
<h1>jQuery��ά�۵����չ��������Ч</h1>
</header>
<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">
<a href="item-2.html">
<div>
<h2>Title 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur.</p>
<b>View More</b>
</div>
</a>
</li>
<li class="cd-item">
<a class="dark-text" href="item-3.html">
<div>
<h2>Title 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur.</p>
<b>View More</b>
</div>
</a>
</li>
<li class="cd-item">
<a href="item-4.html">
<div>
<h2>Title 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur.</p>
<b>View More</b>
</div>
</a>
</li>
</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 -->
<script src="js/jquery-2.1.1.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
</body>
</html>JS代码(main.js):
jQuery(document).ready(function($){
var gallery = $('.cd-gallery'),foldingPanel = $('.cd-folding-panel'),mainContent = $('.cd-main');
/* open folding content */
gallery.on('click','a',function(event){
event.preventDefault();
openItemInfo($(this).attr('href'));
}
);
/* close folding content */
foldingPanel.on('click','.cd-close',function(event){
event.preventDefault();
toggleContent('',false);
}
);
gallery.on('click',function(event){
/* detect click on .cd-gallery::before when the .cd-folding-panel is open */
if($(event.target).is('.cd-gallery') && $('.fold-is-open').length > 0 ) toggleContent('',false);
}
)function openItemInfo(url){
var mq = viewportSize();
if( 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':gallery.offset().top}
,100,function(){
toggleContent(url,true);
}
);
}
else if( gallery.offset().top + gallery.height() < $(window).scrollTop() + $(window).height() && mq != 'mobile' ){
/* if content is visible below the .cd-gallery - scroll before opening the folding panel */
$('body,html').animate({
'scrollTop':gallery.offset().top + gallery.height() - $(window).height()}
,100,function(){
toggleContent(url,true);
}
);
}
else{
toggleContent(url,true);
}
}
function toggleContent(url,bool){
if( bool ){
/* load and show new content */
var foldingContent = foldingPanel.find('.cd-fold-content');
foldingContent.load(url+' .cd-fold-content > *',function(event){
setTimeout(function(){
$('body').addClass('overflow-hidden');
foldingPanel.addClass('is-open');
mainContent.addClass('fold-is-open');
}
,100);
}
);
}
else{
/* close the folding panel */
var mq = viewportSize();
foldingPanel.removeClass('is-open');
mainContent.removeClass('fold-is-open');
(mq == 'mobile' || $('.no-csstransitions').length > 0 )/* according to the mq,immediately remove the .overflow-hidden or wait for the end of the animation */
? $('body').removeClass('overflow-hidden'):mainContent.find('.cd-item').eq(0).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
$('body').removeClass('overflow-hidden');
mainContent.find('.cd-item').eq(0).off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
}
);
}
}
function viewportSize(){
/* retrieve the content value of .cd-main::before to check the actua mq */
return window.getComputedStyle(document.querySelector('.cd-main'),'::before').getPropertyValue('content').replace(/"/g,"").replace(/'/g,"");
}
}
);
CSS代码(reset.css):
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License:none (public domain)*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
CSS代码(style.css):
/* --------------------------------Primary style-------------------------------- */
*,*::after,*::before{box-sizing:border-box;}
html{font-size:62.5%;}
body{font-size:1.6rem;font-family:"Open Sans",sans-serif;color:#363558;background-color:#1c1726;}
a{color:#544173;text-decoration:none;}
h1,h2{font-family:"Vollkorn",serif;}
/* --------------------------------Patterns - reusable parts of our design-------------------------------- */
.overflow-hidden{overflow:hidden;}
/* --------------------------------Header-------------------------------- */
header{height:170px;line-height:170px;text-align:center;background:#ffffff;}
header h1{font-size:2.2rem;color:#363558;}
@media only screen and (min-width:600px){header{height:200px;line-height:200px;}
header h1{font-size:3rem;}
}
/* --------------------------------Main content-------------------------------- */
.cd-main{overflow-x:hidden;}
.cd-main::before{/* never visible - this is used in jQuery to check the current MQ */
display:none;content:'mobile';}
.cd-main > *{-webkit-transition:-webkit-transform 0.5s 0.4s;-moz-transition:-moz-transform 0.5s 0.4s;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 */
-webkit-transform:translateX(100%);-moz-transform:translateX(100%);-ms-transform:translateX(100%);-o-transform:translateX(100%);transform:translateX(100%);-webkit-transition:-webkit-transform 0.5s 0s;-moz-transition:-moz-transform 0.5s 0s;transition:transform 0.5s 0s;}
@media only screen and (min-width:600px){.cd-main.fold-is-open > *{-webkit-transform:translateX(600px);-moz-transform:translateX(600px);-ms-transform:translateX(600px);-o-transform:translateX(600px);transform:translateX(600px);}
}
@media only screen and (min-width:1100px){.cd-main::before{/* never visible - this is used in jQuery to check the current MQ */
content:'desktop';}
.cd-main.fold-is-open > *{/* reset style - on bigger devices we translate the gallery items */
-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0);}
}
.cd-gallery::after{clear:both;content:"";display:table;}
.cd-gallery::before{/* this is the dark layer covering the .cd-gallery when the .cd-folding-panel is open */
display:block;content:'';position:absolute;z-index:1;top:0;left:0;height:100%;width:100%;background-color:rgba(28,23,38,0.6);opacity:0;visibility:hidden;-webkit-transition:opacity 0.5s 0.4s,visibility 0s 0.9s;-moz-transition:opacity 0.5s 0.4s,visibility 0s 0.9s;transition:opacity 0.5s 0.4s,visibility 0s 0.9s;}
.fold-is-open .cd-gallery::before{visibility:visible;opacity:1;-webkit-transition:opacity 0.5s 0s,visibility 0s 0s;-moz-transition:opacity 0.5s 0s,visibility 0s 0s;transition:opacity 0.5s 0s,visibility 0s 0s;}
.cd-item{width:100%;height:300px;text-align:center;/* Force Hardware Acceleration */
-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:-webkit-transform 0.5s 0.4s;-moz-transition:-moz-transform 0.5s 0.4s;transition:transform 0.5s 0.4s;}
.cd-item > a{display:table;height:100%;width:100%;overflow:hidden;color:#ffffff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.cd-item > a.dark-text{color:#363558;}
.cd-item > a.dark-text b{border-color:#363558;}
.cd-item div{display:table-cell;vertical-align:middle;}
.cd-item:nth-of-type(1){background-color:#363558;}
.cd-item:nth-of-type(2){background-color:#544173;}
.cd-item:nth-of-type(3){background-color:#dadcdc;}
.cd-item:nth-of-type(4){background-color:#65d29b;}
.cd-item h2{font-size:2.2rem;}
.cd-item p{line-height:1.2;font-size:1.4rem;opacity:0.6;padding:1em 0;}
.cd-item b{display:inline-block;font-size:1.2rem;font-weight:bold;text-transform:uppercase;letter-spacing:1px;padding:1em 1.3em;border-radius:50em;border:1px solid #ffffff;}
@media only screen and (min-width:1100px){.cd-item{width:50%;float:left;height:520px;-webkit-transition:-webkit-transform 0.5s 0.4s;-moz-transition:-moz-transform 0.5s 0.4s;transition:transform 0.5s 0.4s;}
.cd-item h2{font-size:3rem;}
.cd-item p{font-size:1.6rem;}
.cd-item h2,.cd-item p{-webkit-transform:translateY(30px);-moz-transform:translateY(30px);-ms-transform:translateY(30px);-o-transform:translateY(30px);transform:translateY(30px);-webkit-transition:-webkit-transform 0.3s 0.1s;-moz-transition:-moz-transform 0.3s 0.1s;transition:transform 0.3s 0.1s;}
.cd-item b{opacity:0;-webkit-transform:translateY(20px);-moz-transform:translateY(20px);-ms-transform:translateY(20px);-o-transform:translateY(20px);transform:translateY(20px);-webkit-transition:opacity 0.3s 0s,-webkit-transform 0.3s 0s;-moz-transition:opacity 0.3s 0s,-moz-transform 0.3s 0s;transition:opacity 0.3s 0s,transform 0.3s 0s;}
.no-touch .cd-item a:hover h2,.no-touch .cd-item a:hover p{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0);-webkit-transition:-webkit-transform 0.3s 0s;-moz-transition:-moz-transform 0.3s 0s;transition:transform 0.3s 0s;}
.no-touch .cd-item a:hover b{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0);-webkit-transition:opacity 0.3s 0.1s,-webkit-transform 0.3s 0.1s;-moz-transition:opacity 0.3s 0.1s,-moz-transform 0.3s 0.1s;transition:opacity 0.3s 0.1s,transform 0.3s 0.1s;}
.fold-is-open .cd-item{-webkit-transition:-webkit-transform 0.5s 0s;-moz-transition:-moz-transform 0.5s 0s;transition:transform 0.5s 0s;-webkit-transform:translateX(-400px);-moz-transform:translateX(-400px);-ms-transform:translateX(-400px);-o-transform:translateX(-400px);transform:translateX(-400px);}
.fold-is-open .cd-item:nth-of-type(2n){-webkit-transform:translateX(400px);-moz-transform:translateX(400px);-ms-transform:translateX(400px);-o-transform:translateX(400px);transform:translateX(400px);}
}
/* --------------------------------folding panel-------------------------------- */
.cd-folding-panel{position:fixed;z-index:1;top:0;left:0;height:100vh;width:100%;visibility:hidden;overflow:hidden;-webkit-transition:visibility 0s 0.9s;-moz-transition:visibility 0s 0.9s;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;position:relative;/* enable a 3D-space for children elements */
-webkit-perspective:2000px;-moz-perspective:2000px;perspective:2000px;}
.cd-folding-panel .fold-left::after,.cd-folding-panel .fold-right::after{/* 2 fold sides */
content:'';position:absolute;top:0;left:0;height:100%;width:100%;/* Force Hardware Acceleration */
-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:-webkit-transform 0.5s 0.4s,background-color 0.5s 0.4s;-moz-transition:-moz-transform 0.5s 0.4s,background-color 0.5s 0.4s;transition:transform 0.5s 0.4s,background-color 0.5s 0.4s;}
.cd-folding-panel .fold-right{-webkit-perspective-origin:0% 50%;-moz-perspective-origin:0% 50%;perspective-origin:0% 50%;}
.cd-folding-panel .fold-right::after{-webkit-transform-origin:right center;-moz-transform-origin:right center;-ms-transform-origin:right center;-o-transform-origin:right center;transform-origin:right center;-webkit-transform:translateX(-100%) rotateY(-90deg);-moz-transform:translateX(-100%) rotateY(-90deg);-ms-transform:translateX(-100%) rotateY(-90deg);-o-transform:translateX(-100%) rotateY(-90deg);transform:translateX(-100%) rotateY(-90deg);background-color:#c0c3c3;}
.cd-folding-panel .fold-left{/* on mobile only the right fold side is visible */
display:none;}
.cd-folding-panel .fold-left::after{background-color:#f9fafa;}
.cd-folding-panel .cd-close{/* 'X' close icon */
position:absolute;z-index:1;display:inline-block;top:10px;right:10px;height:44px;width:44px;/* image replacement */
overflow:hidden;text-indent:100%;white-space:nowrap;opacity:0;-webkit-transition:opacity 0.2s 0s;-moz-transition:opacity 0.2s 0s;transition:opacity 0.2s 0s;}
.cd-folding-panel .cd-close::after,.cd-folding-panel .cd-close::before{/* lines of 'X' icon */
content:'';position:absolute;height:3px;width:32px;left:50%;top:50%;background-color:#544173;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:opacity 0.2s;-moz-transition:opacity 0.2s;transition:opacity 0.2s;}
.cd-folding-panel .cd-close::after{-webkit-transform:translateX(-50%) translateY(-50%) rotate(45deg);-moz-transform:translateX(-50%) translateY(-50%) rotate(45deg);-ms-transform:translateX(-50%) translateY(-50%) rotate(45deg);-o-transform:translateX(-50%) translateY(-50%) rotate(45deg);transform:translateX(-50%) translateY(-50%) rotate(45deg);}
.cd-folding-panel .cd-close::before{-webkit-transform:translateX(-50%) translateY(-50%) rotate(-45deg);-moz-transform:translateX(-50%) translateY(-50%) rotate(-45deg);-ms-transform:translateX(-50%) translateY(-50%) rotate(-45deg);-o-transform:translateX(-50%) translateY(-50%) rotate(-45deg);transform:translateX(-50%) translateY(-50%) rotate(-45deg);}
.cd-folding-panel.is-open{visibility:visible;-webkit-transition:visibility 0s 0s;-moz-transition:visibility 0s 0s;transition:visibility 0s 0s;}
.cd-folding-panel.is-open .fold-right::after,.cd-folding-panel.is-open .fold-left::after{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0);-webkit-transition:-webkit-transform 0.5s 0s,background-color 0.5s 0s;-moz-transition:-moz-transform 0.5s 0s,background-color 0.5s 0s;transition:transform 0.5s 0s,background-color 0.5s 0s;}
.cd-folding-panel.is-open .fold-right::after{background-color:#f9fafa;}
.cd-folding-panel.is-open .cd-close{opacity:1;-webkit-transition:opacity 0.2s 0.5s;-moz-transition:opacity 0.2s 0.5s;transition:opacity 0.2s 0.5s;}
@media only screen and (min-width:600px){.cd-folding-panel{width:600px;}
}
@media only screen and (min-width:1100px){.cd-folding-panel{left:50%;right:auto;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-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 */
-webkit-perspective-origin:0% 50%;-moz-perspective-origin:0% 50%;perspective-origin:0% 50%;}
.cd-folding-panel .fold-right::after{-webkit-transform-origin:right center;-moz-transform-origin:right center;-ms-transform-origin:right center;-o-transform-origin:right center;transform-origin:right center;-webkit-transform:translateX(-100%) rotateY(-90deg);-moz-transform:translateX(-100%) rotateY(-90deg);-ms-transform:translateX(-100%) rotateY(-90deg);-o-transform:translateX(-100%) rotateY(-90deg);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 */
-webkit-perspective-origin:100% 50%;-moz-perspective-origin:100% 50%;perspective-origin:100% 50%;}
.cd-folding-panel .fold-left::after{-webkit-transform-origin:left center;-moz-transform-origin:left center;-ms-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center;-webkit-transform:translateX(100%) rotateY(90deg);-moz-transform:translateX(100%) rotateY(90deg);-ms-transform:translateX(100%) rotateY(90deg);-o-transform:translateX(100%) rotateY(90deg);transform:translateX(100%) rotateY(90deg);}
}
.cd-fold-content{position:absolute;top:0;left:0;height:100%;width:100%;padding:4em 2em;visibility:hidden;-webkit-transition:visibility 0s 0.4s;-moz-transition:visibility 0s 0.4s;transition:visibility 0s 0.4s;}
.cd-fold-content > *{opacity:0;-webkit-transform:translateY(20px);-moz-transform:translateY(20px);-ms-transform:translateY(20px);-o-transform:translateY(20px);transform:translateY(20px);}
.cd-fold-content h2{font-size:2.4rem;-webkit-transition:-webkit-transform 0.2s 0.2s,opacity 0.2s 0.2s;-moz-transition:-moz-transform 0.2s 0.2s,opacity 0.2s 0.2s;transition:transform 0.2s 0.2s,opacity 0.2s 0.2s;}
.cd-fold-content p,.cd-fold-content em{line-height:1.6;}
.cd-fold-content em{display:inline-block;margin:1em 0;font-family:"Vollkorn",serif;font-size:1.8rem;color:#7a78ae;-webkit-transition:-webkit-transform 0.2s 0.1s,opacity 0.2s 0.1s;-moz-transition:-moz-transform 0.2s 0.1s,opacity 0.2s 0.1s;transition:transform 0.2s 0.1s,opacity 0.2s 0.1s;}
.cd-fold-content p{margin-bottom:1em;font-size:1.4rem;-webkit-transition:-webkit-transform 0.2s 0s,opacity 0.2s 0s;-moz-transition:-moz-transform 0.2s 0s,opacity 0.2s 0s;transition:transform 0.2s 0s,opacity 0.2s 0s;}
.is-open .cd-fold-content{overflow-y:auto;-webkit-overflow-scrolling:touch;visibility:visible;-webkit-transition:visibility 0s 0.5s;-moz-transition:visibility 0s 0.5s;transition:visibility 0s 0.5s;}
.is-open .cd-fold-content > *{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0);}
.is-open .cd-fold-content h2{-webkit-transition:-webkit-transform 0.2s 0.5s,opacity 0.2s 0.5s;-moz-transition:-moz-transform 0.2s 0.5s,opacity 0.2s 0.5s;transition:transform 0.2s 0.5s,opacity 0.2s 0.5s;}
.is-open .cd-fold-content em{-webkit-transition:-webkit-transform 0.2s 0.6s,opacity 0.2s 0.6s;-moz-transition:-moz-transform 0.2s 0.6s,opacity 0.2s 0.6s;transition:transform 0.2s 0.6s,opacity 0.2s 0.6s;}
.is-open .cd-fold-content p{-webkit-transition:-webkit-transform 0.2s 0.7s,opacity 0.2s 0.7s;-moz-transition:-moz-transform 0.2s 0.7s,opacity 0.2s 0.7s;transition:transform 0.2s 0.7s,opacity 0.2s 0.7s;}
@media only screen and (min-width:600px){.cd-fold-content h2{font-size:3.2rem;}
}
@media only screen and (min-width:1100px){.cd-fold-content{padding:4em;}
.cd-fold-content > *{-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px);}
.cd-fold-content em{font-size:2.2rem;}
.cd-fold-content p{font-size:1.6rem;}
}
/* --------------------------------Javascript disabled-------------------------------- */
.no-js .cd-fold-content.single-page{position:static;visibility:visible;height:auto;background-color:#dadcdc;}
.no-js .cd-fold-content.single-page > *{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0);}
分享到QQ
分享到微博
微信扫一扫
