当前位置：首页 > 网页特效 > 滚动

基于Velocity.js的超酷滚动页面特效

分类：滚动日期：2024-05-14 点击(1) 评论(0)

简介

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

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

```css
.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值。

```javascript

//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动画使用下面的代码：

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

web299.com

基于Velocity.js的超酷滚动页面特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果