JavaScript 实现页面滚动动画

下面就来详细讲解“JavaScript 实现页面滚动动画”的完整攻略。

下面就来详细讲解“JavaScript 实现页面滚动动画”的完整攻略。

一、需求分析

在实现页面滚动动画之前，我们需要对需求进行分析，明确实现滚动动画的期望效果。在通常的页面滚动中，用户的鼠标滚轮操作会导致页面上下滚动一整屏。而在本次实现中，期望实现滚动时页面逐渐平滑地过渡到下一屏，而不是一刹那地跳转。

因此，我们可以从以下几个方面考虑代码实现：

1. 监听用户的鼠标滚轮事件
2. 根据滚轮滚动方向调整页面上下滚动的距离
3. 平滑过渡到下一屏页面

二、实现思路

基于以上的需求分析，我们可以按照以下的思路实现页面滚动动画：

1. 在HTML文档中创建各个滚动的页面屏
2. 使用CSS将各个页面平移至正确的位置并设置页面高度
3. 使用JavaScript监听用户的滚轮事件和页面的滚动事件
4. 当用户滚动时，根据滚轮方向修改页面滚动距离
5. 平滑过渡到下一个屏幕页面

在代码实现过程中，需要使用到一些JavaScript函数和库，其中包括：

1. addEventListener()方法监听DOM事件
2. getElementsByClassName()方法获取DOM元素
3. window.requestAnimationFrame()方法实现帧动画
4. Tween.js库实现平滑过渡动画

三、代码实现

下面以两个示例为例进行代码实现。

示例一：基本滚动效果

在此示例中，实现了基本的页面滚动效果。代码实现基本流程如下：

1. 在HTML文档中创建滚动页面

<div class="box">
  <div class="page page1"></div>
  <div class="page page2"></div>
  <div class="page page3"></div>
</div>

1. 使用CSS将页面平移至正确位置并设置页面高度

body {
  overflow:hidden;
}
.box {
  position:relative;
  width:100%;
  height:100vh;
}
.page {
  position:absolute;
  width:100%;
  height:100%;
}
.page1 {
  left:0%;
  background-color:#f7cac9;
}
.page2 {
  left:100%;
  background-color:#a6e3e9;
}
.page3 {
  left:200%;
  background-color:#b8b8d0;
}

1. 使用JavaScript监听用户的滚轮事件和页面的滚动事件

let curIndex = 0; // 页面初始索引为0（第一页）
let isAnimation = false;  
document.addEventListener('wheel', function(event) { // 鼠标滚动事件
  if (isAnimation) return; // 正在执行动画则返回

  // 滚轮上滚，curIndex依次递减
  if (event.deltaY < 0 && curIndex > 0) {
    curIndex--;
    nextPage(curIndex); // 平滑过渡到下一个页面
  }
  // 滚轮下滚，curIndex依次增加
  else if (event.deltaY > 0 && curIndex < 2) {
    curIndex++;
    nextPage(curIndex); // 平滑过渡到下一个页面
  }
}, false);

window.addEventListener('hashchange', function(event) { // 页面滚动事件
  let pageId = parseInt(location.hash.slice(1)) + 1;
  if (!isNaN(pageId)) {
    curIndex = pageId - 1;
    nextPage(curIndex);
  }
}, false);

1. 当用户滚动滚轮时，根据滚轮方向修改页面滚动距离

function nextPage(curIndex) {
  isAnimation = true;
  let nextPage = document.getElementsByClassName('page')[curIndex];
  let nextLeft = nextPage.offsetLeft;

  TweenMax.to(box, 0.8, { left: -nextLeft, onComplete: function () {
    isAnimation = false;
    location.hash = curIndex;
  }});
}

这里使用了TweenMax库实现平滑变化，具体解释可参考官方文档。

示例二：带有导航条的滚动效果

在此示例中，实现了带有导航条的页面滚动效果。代码实现增加了一个导航条，实现代码基本流程如下：

1. 在HTML文档中创建导航条和滚动页面

<div class="nav">
  <a href="#1">Page1</a>
  <a href="#2">Page2</a>
  <a href="#3">Page3</a>
</div>
<div class="box">
  <div class="page page1"></div>
  <div class="page page2"></div>
  <div class="page page3"></div>
</div>

1. 使用CSS设置导航条样式

a {
  text-decoration:none;
  margin-right:20px;
  color: #fff;
  cursor: pointer;
}
.actived {
  color: #000;
  font-weight: bold;
}

1. 监听用户的滚轮事件和页面的滚动事件

let curIndex = 0;
let isAnimation = false;  
document.addEventListener('wheel', function(event) {
  if (isAnimation) return;

  if (event.deltaY < 0 && curIndex > 0) {
    curIndex--;
    nextPage(curIndex);
  }
  else if (event.deltaY > 0 && curIndex < 2) {
    curIndex++;
    nextPage(curIndex);
  }
}, false);

window.addEventListener('hashchange', function(event) {
  let pageId = parseInt(location.hash.slice(1,));
  if (!isNaN(pageId)) {
    curIndex = pageId - 1;
    nextPage(curIndex);
  }
}, false);

1. 根据滚轮滚动方向调整页面滚动距离并更新导航条状态

function nextPage(curIndex) {
  isAnimation = true;
  let nextPage = document.getElementsByClassName('page')[curIndex];
  let nextLeft = nextPage.offsetLeft;

  TweenMax.to(box, 0.8, { left: -nextLeft, onComplete: function () {
    isAnimation = false;
    location.hash = `#${curIndex+1}`;

    // 更新导航条状态
    let navArr = document.getElementsByClassName('nav')[0].childNodes;
    for (let i = 0; i < navArr.length; i++) {
      if (navArr[i].tagName === 'A') {
        navArr[i].classList.remove('actived');
        if (navArr[i].hash === `#${curIndex+1}`) {
          navArr[i].classList.add('actived');
        }
      }
    }
  }});
}

1. 监听导航条点击事件

let navArr = document.getElementsByClassName('nav')[0].childNodes;
for (let i = 0; i < navArr.length; i++) {
  if (navArr[i].tagName === 'A') {
    navArr[i].addEventListener('click', function() {
      let hash = this.hash.slice(1);
      curIndex = parseInt(hash) - 1;
      nextPage(curIndex);
    }, false);
  }
}

这个示例中新增了对导航条的处理，以及点击导航条时的跳转处理。

以上就是完整的“JavaScript 实现页面滚动动画”的攻略和示例说明。具体实现可以根据需求进行调整。