基于Velocity.js的超酷滚动页面特效_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

这是一款基于Velocity.js和CSS3制作的效果非常炫酷的滚动页面特效。这个特效中有7种不同的页面滚动效果，分别是：缩放、旋转、画廊、跟随、透明度、固定位置和视觉差效果。

注意该页面滚动特效在小屏幕的设备上是没有效果的，在这些屏幕中页面只会正常的上下滚动。

制作方法

要使用某种内置的页面滚动效果，可以在<body>标签上使用data-animation和data-hijacking属性来指定。data-animation属性的可选值有：none/scaleDown/rotate/gallery/catch/opacity/fixed/parallax。data-hijacking属性的可选值有：on/off。

<!-- hijacking: on/off - animation: none/scaleDown/rotate/gallery/catch/opacity/fixed/parallax -->
<body data-hijacking="off" data-animation="none">

HTML结构

该页面滚动特效的HTML结构就是一组<section>元素加上一个上下导航按钮。

<section class="cd-section visible">
  <div>
    <h2>Page Scroll Effects</h2>
  </div>
</section>
 
<section class="cd-section">
  <div>
    <h2>Section 2</h2>
  </div>
</section>
 
<section class="cd-section">
  <!-- ... -->
</section>
 
<nav>
  <ul class="cd-vertical-nav">
    <li><a href="#0" class="cd-prev inactive">Next</a></li>
    <li><a href="#0" class="cd-next">Prev</a></li>
  </ul>
</nav> <!-- .cd-vertical-nav -->

CSS样式

特效中的所有动画效果都是在jQuery中使用Velocity.js来完成的，因此没有太多的CSS需要介绍。每一个<section>都简单的设置为100vh，占满整个视口。背景颜色和图片使用:nth-of-type()选择器来选择相应的元素来制作。

.cd-section {
  height: 100vh;
}
.cd-section:first-of-type > div {
  background-color: #2b334f;
}
.cd-section:nth-of-type(2) > div {
  background-color: #2e5367;
}
.cd-section:nth-of-type(3) > div {
  background-color: #267481;
}
.cd-section:nth-of-type(4) > div {
  background-color: #fcb052;
}
.cd-section:nth-of-type(5) > div {
  background-color: #f06a59;
}
[data-animation="parallax"] .cd-section > div {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
[data-animation="parallax"] .cd-section:first-of-type > div {
  background-image: url("../img/img-1.jpg");
}
[data-animation="parallax"] .cd-section:nth-of-type(2) > div {
  background-image: url("../img/img-2.jpg");
}
[data-animation="parallax"] .cd-section:nth-of-type(3) > div {
  background-image: url("../img/img-3.jpg");
}
[data-animation="parallax"] .cd-section:nth-of-type(4) > div {
  background-image: url("../img/img-4.jpg");
}
[data-animation="parallax"] .cd-section:nth-of-type(5) > div {
  background-image: url("../img/img-5.jpg");
}

JAVASCRIPT

当data-hijacking = off的时候，每一个section的都根据它相对于视口的位置来动画。例如scaleDown动画，特效仅是中改变section > div元素的opacity, scale, translateY 和 boxShadowBlur值。

//actualBlock is the section we are animation
var offset = $(window).scrollTop() - actualBlock.offset().top,
  windowHeight = $(window).height();
 
if( offset >= -windowHeight && offset <= 0 ) {
  // section entering the viewport
  translateY = (-offset)*100/windowHeight;
    scale = 1;
  opacity = 1;
} else if( offset > 0 && offset <= windowHeight ) {
  //section leaving the viewport 
    scale = (1 - ( offset * 0.3/windowHeight));
  opacity = ( 1 - ( offset/windowHeight) );
  translateY = 0;
  boxShadowBlur = 40*(offset/windowHeight);
}

当data-hijacking = on的时候，插件中使用Velocity UI Pack registration feature来定义每一个动画的效果，例如，scaleDown动画使用下面的代码：

$.Velocity
    .RegisterEffect("scaleDown", {
      defaultDuration: 800,
        calls: [ 
            [ { opacity: '0', scale: '0.7', boxShadowBlur: '40px' }, 1]
        ]
    });