滚动显示

@ScrollReveal

随着屏幕的滚动，逐渐显示指定内容

可以指定类型丰富的显示效果

无法操作伪元素

应用动画时，可能会撑开容器，注意设置溢出隐藏或最大宽度

获取库文件

进入官网 - scrollrevealjs，使用提供的在线资源

<script src="https://unpkg.com/scrollreveal"></script>

使用 cdnjs ，查找 ScrollReveal 并使用

<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollReveal.js/4.0.9/scrollreveal.min.js"></script>

使用老师提供的本地资源 scrollreveal.min.js，单击下载并引入

进入官网 - scrollrevealjs 对应的 Github - scrollreveal → dist → scrollreveal.min.js → raw → 另存为，然后在项目中引入

基本使用

配置 - 实例化

以 JSON 值对的形式，为实例和元素指定选项，设置丰富的显示效果；涉及到的时间单位是毫秒 ms

区分实例配置和元素配置

可以为实例统一指定，再单独为特定元素增加或修改

实例选项
属性	说明
distance	距离
delay	延迟显示时间
duration	持续时间
origin	统一指定显示来向：top \| right \| bottom \| left
reset	每次触发都显示效果

元素选项
属性	说明
delay	延迟显示时间
interval	多个元素时，显示的间隔
origin	单独指定显示来向：top \| right \| bottom \| left

const sr = ScrollReveal({
    distance: '40px',
    duration: 2000,
    delay: 400,
    reset: true
})

应用到元素

可以指定/追加新属性

sr.reveal('.banner-item', {
    interval: 100
})

sr.reveal('.i0', {
    origin: 'top'
})

也可以应用到多个类；多个类以逗号,区分

sr.reveal('.i4, .breath-item, .info-item', {
    origin: 'bottom',
    interval: 100
})

[ ] 显示指定元素；先写配置再应用到实例 - 通过展开并追加属性可以为不同的元素应用不同的时间间隔

这里使用先指定配置参数，再使用静态方法操作元素

const revealOption = {
  delay: 300,
  distance: "50px",
  duration: 500,
  easing: "ease-in-out",
  origin: "bottom",
};

ScrollReveal().reveal(".swiper-info", { 
  ...revealOption,
   interval: 350
});

[ ] 显示完毕后执行数字动画 - 个人网站；同时使用 Anime.js库

<div class="data-item">
  <input type="text" class="num" value="234" data-val="234">
</div>
<div class="data-item">
  <input type="text" class="num" value="168" data-val="168">
</div>

ScrollReveal().reveal(".data-item", {
  afterReveal: (el) => {
    let ipt = el.querySelector('.num');
    console.log('ipt', ipt);
    anime({
      targets: ipt,
      value: [0, ipt.value],
      duration: 2000,
      round: 1,
      easing: 'easeInExpo',
    })
  }
});

是通过 transform 实现，如果还需要使用 :hover 触发 transform，应使用 !important 提权

.team-item:hover {
  transform: translateY(-10px) scale(1.02) !important;
  //
}

[ ] 教学评价 - 从缩放0.5和透明0逐一放到完全显示

ScrollReveal 无法操作伪元素，所以使用了多个DOM元素

ScrollReveal().reveal('.eva-bar', { 
  scale: 0.5, 
  opacity: 0, 
  reset: true, 
  interval: 200 
});