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

当前位置:主页 > jQuery库 > 菜单和导航 > jQuery和CSS3超酷3D拉窗帘式滚动导航特效
jQuery和CSS3超酷3D拉窗帘式滚动导航特效
分享:

    插件介绍

    这是一款效果炫酷的jQuery和css3 3d拉窗帘式滚动导航特效插件。该3d导航插件可以使用鼠标滚动或点击导航按钮像拉开窗帘和关闭窗帘一样打开或关闭整个屏幕,以达到导航的效果。

    浏览器兼容性

    浏览器兼容性
    时间:2015-01-11
    阅读:
简要教程

这是一款效果炫酷的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: fixedtop: 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
    });
}