这是一个很酷的 jQuery 和 CSS3 3D 窗帘导航效果。 这种特殊效果使用 CSS 转换和 jQuery 使两个“窗帘”模拟沿 Z 轴拉开。
HTML结构
HTML 结构非常简单：使用两个部分作为包装器。 每个部分包含一个 div.cd-block 和一个 div.cd-half-block。 第一个 .cd-half-block 是空的，用来设置背景图片。 第二个用于设置文本。
3D窗帘模板
样式
小屏幕上没有幕布效果，只是简单地排列了各个板块的内容。
在桌面浏览器（分辨率大于 1170px）上，我们为 .cd-block 元素设置 position: fixed 和 top: 0 以将这些元素放置在屏幕顶部（此方法可以将一个元素放置在另一个元素之上）。 由于 .cd-section 元素设置了 height: 100vh （和 height: position: static ）拉窗帘声音特效，它们仍然保持其位置。
此外，我们为每个 .cd-half-block 元素设置一个 translateX（也分别为 :first-of-type 和 :nth-of-type(2) 设置 translateX(-100%) 和 translateX(100%) ） ), 这使得它们移出屏幕。
@media only screen and (min-width: 1170px) {
.cd 部分 {
高度：100vh；
}
.cd 块 {
位置：固定；
顶部：0；
左：0；
}
.cd-半块{
高度：100vh；
宽度：50%；
位置：绝对；
顶部：0；
}
.cd-section:nth-of-type(even) .cd-half-block:first-of-type,
.cd-section:nth-of-type(odd) .cd-half-block:nth-of-type(2) {
左：0；
转换：translateX(-100%)；
}
.cd-section:nth-of-type(odd) .cd-half-block:first-of-type,
.cd-section:nth-of-type(even) .cd-half-block:nth-of-type(2) {
右：0；
转换：translateX(100%)；
}
}
JavaScript
每段幕布动画有两个阶段。 第一阶段是两个.cd-half-block元素插入屏幕一会儿（translateX的值从100%/-100%到0）； 第二阶段是.cd-block元素缩小，透明度降低（模拟3d动画效果）。
为了做出上面的效果，我们在窗口的滚动事件中加入了triggerAnimation()函数。 当用户滚动窗口时2d游戏素材，每个.cd-section元素根据窗口的scrollTop和section的offset().top值改变translateX和scale的值。
$(window).on('滚动', function(){
触发动画（）；
});
函数触发动画（）{
如果（MQ == '桌面'）{
//如果在桌面屏幕上 - 动画部分
window.requestAnimationFrame(animateSection);
} // .....
}
函数动画部分（）{
$('.cd-section').each(函数(){
var actualBlock = $(this),
规模游戏素材下载 免费，
翻译拉窗帘声音特效，
不透明度；
//评估比例/翻译值
//...
scaleBlock(actualBlock.find('.cd-block'), scale, opacity);
translateBlock(actualBlock.find('.cd-half-block').eq(0), '-'+translate);
translateBlock(actualBlock.find('.cd-half-block').eq(1), translate);
});
}
函数 translateBlock(elem, value) {
元素.css({
//...
'转换'：'translateX（'+值+'）'，
});
}
函数 scaleBlock(elem, value, opac) {
元素.css({
//...
'转换'：'比例（'+值+'）'，
'不透明度'：opac
});
}
