basicScroll项目实战：创建平滑滚动动画效果详解

basicScroll项目实战：创建平滑滚动动画效果详解

basicScroll Standalone parallax scrolling for mobile and desktop with CSS variables. 项目地址: https://gitcode.com/gh_mirrors/ba/basicScroll

项目概述

basicScroll是一个轻量级的JavaScript库，专门用于创建基于页面滚动的动画效果。它通过简单的配置就能实现元素在滚动过程中的各种变换效果，如平移、旋转、淡入淡出等。本文将通过分析默认演示文件，深入讲解如何使用basicScroll创建各种滚动动画效果。

基础HTML结构

演示文件采用了简洁的HTML5文档结构，包含三个主要容器：

1. 第一个容器展示不同缓动函数的Y轴平移效果
2. 第二个容器展示旋转和淡入淡出效果
3. 第三个容器展示直接控制效果

CSS样式解析

样式部分有几个关键点值得注意：

• will-change: transform属性用于优化动画性能，提前告知浏览器元素将发生变换
• 使用CSS变量(如--ty、--r、--o)控制动画属性，这些变量将在JavaScript中被basicScroll动态更新
• 容器高度设置为400vh(视口高度的4倍)，确保有足够的滚动空间展示动画效果

JavaScript实现详解

1. 缓动函数效果实现

const easeBoxes = []

document.querySelectorAll('.easeBox').forEach((elem, i) => {
  const timing = elem.getAttribute('data-timing')
  
  easeBoxes.push(basicScroll.create({
    elem: elem,
    from: 'middle-bottom',
    to: 'bottom-top',
    direct: true,
    props: {
      '--ty': {
        from: '0',
        to: '100px',
        timing: timing
      }
    }
  }))
})

这段代码实现了：

• 为每个.easeBox元素创建独立的动画实例
• 从元素的data-timing属性获取缓动函数类型
• 配置动画从视口中部底部(middle-bottom)开始，到视口底部顶部(bottom-top)结束
• 设置Y轴平移距离从0到100px，并应用不同的缓动函数

2. 旋转动画实现

const rotateBox = basicScroll.create({
  elem: document.querySelector('.rotateBox'),
  from: 'top-middle',
  to: 'top-top',
  props: {
    '--r': {
      from: '0',
      to: '1turn'
    }
  }
})

这个配置实现了：

• 元素从视口顶部中部(top-middle)开始旋转
• 到视口顶部顶部(top-top)完成旋转
• 旋转角度从0到1圈(360度)

3. 淡入淡出效果

const fadeBox = basicScroll.create({
  elem: document.querySelector('.fadeBox'),
  from: 'bottom-bottom',
  to: 'top-middle',
  inside: (instance, percentage, props) => console.log('fadeBox is animating'),
  outside: (instance, percentage, props) => console.log('fadeBox is not animating'),
  props: {
    '--o': {
      from: .01,
      to: .99
    }
  }
})

特点包括：

• 透明度从0.01到0.99变化
• 提供了inside和outside回调函数，可以监听动画状态
• 动画范围从视口底部底部(bottom-bottom)到视口中部顶部(top-middle)

4. 直接控制效果

const referenceBox = basicScroll.create({
  elem: document.querySelector('.referenceBox'),
  from: 'bottom-bottom',
  to: 'top-top',
  direct: document.querySelector('.directBox'),
  props: {
    '--o': {
      from: .01,
      to: .99
    }
  }
})

这种配置的特殊之处在于：

• 使用direct属性将动画效果直接应用到另一个元素(.directBox)
• 参考元素(.referenceBox)的滚动位置控制目标元素的透明度变化

动画启动

所有动画实例创建后，需要通过调用start()方法激活：

rotateBox.start()
fadeBox.start()
referenceBox.start()
easeBoxes.forEach((easeBox) => easeBox.start())

关键概念总结

1. 触发点定义：通过from和to属性定义动画的起始和结束位置，使用视口相对位置描述，如top-top、middle-bottom等

2. 属性变化：使用props对象定义需要动画的CSS属性和变化范围

3. 缓动函数：支持多种缓动函数控制动画节奏，如sineInOut、backInOut等

4. 直接控制：可以通过direct属性让一个元素的动画控制另一个元素的变化

5. 回调函数：提供inside和outside回调，用于监听动画状态变化

实际应用建议

1. 性能优化：对于需要变换的元素，始终添加will-change属性

2. CSS变量：推荐使用CSS变量控制动画属性，便于维护和扩展

3. 动画范围：合理设置from和to值，确保动画在合适的滚动位置触发

4. 回调利用：使用回调函数可以实现更复杂的交互逻辑，如动画开始/结束时触发其他操作

basicScroll通过简洁的API提供了强大的滚动动画功能，适合需要为网站添加视差效果或滚动交互的场景。掌握这些核心概念后，开发者可以轻松创建各种吸引人的滚动动画效果。

basicScroll Standalone parallax scrolling for mobile and desktop with CSS variables. 项目地址: https://gitcode.com/gh_mirrors/ba/basicScroll