3D 褶皱效果 3D Folding Panel

未知
JavaScript HTML/CSS
跨平台
2015-05-05
大胖森

3D Folding Panel 是一款 CSS 转换和 jQuery 提供动力的次要内容面板。能够渲染 3D 褶皱效果。支持 IE、Chrome、firefox、Safari、Opera。

3d folding panel

创建结构:

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

加载中

评论(0)

暂无评论

暂无资讯

暂无问答

【TeeChart for Java教程】(二)图表显示方法——下

【下载TeeChart for Java最新版本】 上一篇讲到图表显示的General、Axis、Titles、Legend四种方法,本文讲解剩下Panel、Paging、Walls、3D四种。 (一)Panel TeeChart Panel类允许设置增强图...

08/29 15:19
4
0
Chem 3D中创建立体模型有哪些方法

ChemDraw作为一款很受大家欢迎的化学绘图软件,其在绘制平面化学方面的功能已经非常的强大了,其实它也可以绘制3D图形。Chem 3D就是绘制3D图形的重要组件。而且为了满足不同的用户绘图的需求...

2016/06/27 10:46
32
0
【TeeChart Pro ActiveX教程】(二):图表显示属性(下)

下载TeeChart Pro ActiveX最新版本 上篇文章讲到图表属性中的General、 Axis、Titles和Legend四个属性,本文接着讲另外四个属性Panel、Paging、Walls和3D。 Panel属性 TeeChart Panel页面允许...

10/26 09:56
1
0
前端,关乎用户对产品的直接体验,比什么后台、架构更重要!

Google的前端网站最佳实践 https://github.com/google/web-starter-kit 图表 https://github.com/d3/d3/wiki/Gallery 前端框架(定义了包括前端的结构应该怎么样的,js/css的基本代码是什么,...

2016/08/24 11:05
13
0
绝对令人的惊叹的CSS3折叠效果

日期:2012-11-30 来源:GBin1.com 折纸效果是最近触摸屏幕最流行的一个3D效果,工作原理很简单,只需要轻轻触摸屏幕,它就会直接影响到即将显示出来的内容。这种独特的显示方式绝对可以让用...

2012/12/03 11:26
90
0
让eclipse支持类似VS的Region

1.插件下载、安装 eclipse plugin:http://incubator.apache.org/isis/com.cb.eclipse.folding.KAM-3.5.zip(也叫com.cb.eclipse.folding 1.06,还有个名字:coffee-bytes),若链接失效可搜...

2012/06/25 11:31
2.3K
1
eclipse 函数折叠展开

eclipse快捷键 代码块折叠展开

2016/01/08 14:33
375
1
Folding Custom Regions with Line Comments -- 解决idea中代码收起的问题

Folding Custom Regions with Line Comments With IntelliJ IDEA, you can surround a fragment of source code with line comments. So doing, IntelliJ IDEA supports two styles: VisualS...

2016/03/22 20:06
14
1
【TeeChart .NET教程】(二)图表显示属性

上一篇:【TeeChart .NET教程】(一)构建图表和填充数据 上一篇:【TeeChart .NET教程】(三)图表分页 【下载TeeChart.Net最新版本】 图表显示功能是影响图表整体外观的功能。它们包括定义...

07/23 13:58
56
0
基于 HTML5 的 WebGL 自定义 3D 摄像头监控模型

前言 随着视频监控联网系统的不断普及和发展, 网络摄像机更多的应用于监控系统中,尤其是高清时代的来临,更加快了网络摄像机的发展和应用。 在监控摄像机数量的不断庞大的同时,在监控系统中...

08/13 08:20
48
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部