3D 褶皱效果 3D Folding Panel

码农软件 · 软件分类 · jQuery界面效果 · 2020-01-01 14:58:30

软件介绍

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

本文地址:https://codercto.com/soft/d/22432.html

Operating Systems

Operating Systems

Remzi Arpaci-Dusseau、Andrea Arpaci-Dusseau / Arpaci-Dusseau Books / 2012-8-19 / USD 21.00

A book about modern operating systems. Topics are broken down into three major conceptual pieces: Virtualization, Concurrency, and Persistence. Includes all major components of modern systems includin......一起来看看 《Operating Systems》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具