这是一款效果炫酷的jQuery和CSS3 3D拉窗帘式导航特效。该特效使用CSS transformations 和 jQuery使两块“窗帘”沿Z轴方向模拟被拉开的效果。
HTML结构
HTML结构十分简单:使用两个section
来作为wrapper。每个section
中包含一个 div.cd-block 和一个 div.cd-half-block 。第一个 .cd-half-block 都是空的,它用来设置背景图像。第二个则用来设置文本。
<section class="cd-section"> <div class="cd-block"> <h1>3D Curtain Template</h1> </div> </section> <!-- .cd-section --> <section class="cd-section"> <div class="cd-block"> <div class="cd-half-block"></div> <div class="cd-half-block"> <p> <!-- Text here --> </p> </div> </div> </section> <!-- .cd-section --> <section class="cd-section"> <!-- ... --> </section> <!-- .cd-section -->
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 }); }
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!