html 滑动导航效果,jQuery和CSS3超酷3D拉窗帘式滚动导航特效

这是一款效果炫酷的jQuery和CSS3 3D拉窗帘式导航特效。该特效使用CSS transformations 和 jQuery使两块“窗帘”沿Z轴方向模拟被拉开的效果。

HTML结构

HTML结构十分简单：使用两个section来作为wrapper。每个section中包含一个div.cd-block和一个div.cd-half-block。第一个.cd-half-block都是空的，它用来设置背景图像。第二个则用来设置文本。

3D Curtain Template

CSS样式

在小屏幕上不会有拉窗帘的效果，它只是简单的排列每个section的内容。

在桌面浏览器上(分辨率大于1170像素)，我们为.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-section {

height: 100vh;

}

.cd-block {

position: fixed;

top: 0;

left: 0;

}

.cd-half-block {

height: 100vh;

width: 50%;

position: absolute;

top: 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) {

left: 0;

transform: 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) {

right: 0;

transform: translateX(100%);

}

}

JAVASCRIPT

每一个section拉窗帘动画都有两个阶段，第一个阶段是两个.cd-half-block元素被一会屏幕中(translateX的值从100%/-100%到0)；第二个阶段是.cd-block元素缩小并且透明度减少(模拟3d动画效果)。

为了制作以上效果，我们为窗口的scroll事件添加triggerAnimation()函数。当用户滚动窗口，每一个.cd-section元素都根据窗口的scrollTop和section的offset().top的值来改变translateX和scale的值。

$(window).on('scroll', function(){

triggerAnimation();

});

function triggerAnimation(){

if(MQ == 'desktop') {

//if on desktop screen - animate sections

window.requestAnimationFrame(animateSection);

} // .....

}

function animateSection () {

$('.cd-section').each(function(){

var actualBlock = $(this),

scale,

translate,

opacity;

//evaluate scale/translate values

//...

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);

});

}

function translateBlock(elem, value) {

elem.css({

//...

'transform': 'translateX(' + value + ')',

});

}

function scaleBlock(elem, value, opac) {

elem.css({

//...

'transform': 'scale(' + value + ')',

'opacity': opac

});

}