JavaScript 实现页面滚动动画

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

一、需求分析

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

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

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

二、实现思路

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

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

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

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

三、代码实现

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

示例一：基本滚动效果

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

在HTML文档中创建滚动页面

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

使用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;
}

使用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);

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

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库实现平滑变化，具体解释可参考官方文档。

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

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

在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>

使用CSS设置导航条样式

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

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

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);

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

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');
        }
      }
    }
  }});
}

监听导航条点击事件

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 实现页面滚动动画”的攻略和示例说明。具体实现可以根据需求进行调整。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript 实现页面滚动动画 - Python技术站