文章详情 - 宏推科技

scrollReveal组件是什么

scrollReveal 是一个非常牛逼的组件他可以实现页面的懒加载显示效果并且具备十分养眼的动画淡出移动等等非常非常牛
你在页面上常见的那种滑动到某个位置动画显示的效果大部分都是通过scrollReveal组件实现的

我们看看实际效果吧

在Vue3中使用

使用方式和Vue2没有太大差别也就是Vue2在data声明中的内容需要在Vue3的reactive()声明

第一步下载并安装scrollReveal

npm install scrollreveal

第二步 scrollReveal引入到组件中

import scrollReveal from ''scrollreveal''

第三步在Vue3的 reactive()中声明

Vue2中是在data()中声明的但是到了Vue3呢需要在reactive()中声明记得要引入reactive()哦

<script>
// 1.引入的scrollReveal组件
import scrollReveal from ''scrollreveal''
// 2.引入Vue3的reactive()响应式声明 和 onMounted()页面加载生命周期
import { reactive,onMounted } from ''vue''
export default {
  setup () {
    const data = reactive({
      // 3.在reactive()中声明scrollReveal组件
      scrollReveal: scrollReveal()
    })
      // 4.设置scrollReveal的方法
    const retScroll = () => {
      // reveal()的类名可以为id (#reveal-top) 也可以为class(.reveal-top) 名称随意 并且也支持并集class写法 注意必须设置类否则无法使用
      data.scrollReveal.reveal(''#reveal-top'', {
        // 动画的时长
        duration: 600,
        // 延迟时间
        delay: 500,
        // 动画开始的位置，''bottom'', ''left'', ''top'', ''right''
        origin: ''bottom'',
        // 回滚的时候是否再次触发动画
        reset: false,
        // 延时执行方式（always（一直延时执行），once（只延时执行一次），onload（只在加载时延时执行））
        // // useDelay: ''onload'',
        // 在移动端是否使用动画
        mobile: true,
        // 滚动的距离，单位可以用%，rem等
        distance: ''10px'',
        // 其他可用的动画效果
        opacity: 0.001,
        // 执行速度 线性函数啥的
        easing: ''cubic-bezier(0.5, 0, 0, 1)'',
        // 执行方式（缩放）
        scale: 0.9,
        // 使用执行之前的回调函数
        beforeReveal: function (ele) {
          console.log(1);
        }
      })
    }
    // 5.页面加载生命周期
    onMounted(() => {
      // 6.启动scrollReveal的方法
      retScroll()
    })
  }
}
</script>

第四步在template模板中绑定你设置的class或者id类

高度要高一点你要是一个屏幕都能看完还懒加载锤子

<template>
  <div>
    <div>
      <div id="reveal-top">你好</div>
    </div>
    <div>
      <div id="reveal-top">你好</div>
    </div>
  </div>
</template>

把scrollReveal方法封装

scrollReveal方法这么一坨阅读起来十分的不舒服我们要把他封装成一个js文件单独配置使用的是es6默认导出export default
创建一个js文件使用默认导出export default

导出方法的模板是 export default function 方法名(参数)

// 导出配置的scrollReveal 如果这个方法需要传参 记得要给他传参哦
export default function retScroll (data) {
  data.scrollReveal.reveal(''#reveal-top'', {
    // 动画的时长
    duration: 600,
    // 延迟时间
    delay: 300,
    // 动画开始的位置，''bottom'', ''left'', ''top'', ''right''
    origin: ''bottom'',
    // 回滚的时候是否再次触发动画
    reset: false,
    // 延时执行方式（always（一直延时执行），once（只延时执行一次），onload（只在加载时延时执行））
    // // useDelay: ''onload'',
    // 在移动端是否使用动画
    mobile: true,
    // 滚动的距离，单位可以用%，rem等
    distance: ''10px'',
    // 其他可用的动画效果
    opacity: 0.01,
    // 执行速度 线性函数啥的
    easing: ''cubic-bezier(0.5, 0, 0, 1)'',
    // 执行方式（缩放）
    scale: 0.9,
    // 使用执行之前的回调函数
    beforeReveal: function (ele) {
       console.log(1);
     }
  })
}

然后把原来Vue3声明的scrollReveal方法删掉导入我们封装的js方法

因为我们用的是默认导出所以导入的名称可以随意命名

<script>
    import { onMounted, reactive } from ''vue''
    // 导入scrollReveal
    import scrollReveal from ''scrollreveal''
    // 导入配置的scrollReveal
    import retScroll from ''@/utils/scroll.js''
    export default {
      name: ''Home'',
      components: {
      },
      setup () {
        // 赋值
        const data = reactive({
          scrollReveal: scrollReveal(),
          typewriter: res.my_typewriter
        })
        // 页面加载声明周期
        onMounted(() => {
          // 启动scrollReveal的方法 需要传参
          retScroll(data)
          console.log(data.typewriter)
        })
        
        return {}
      }
    }
</script>

在Vue2中使用

不多说了奥自己看代码块吧

// npm安装scrollReveal
npm install scrollreveal

// 引入到组件中
import scrollReveal from ‘scrollreveal’;

// 在data中注册
data () {
  return {
    scrollReveal: scrollReveal()
  }
}

// 项目中执行，自定义类名。
mounted() {
  this.scrollReveal.reveal(''.reveal-top'', {
    // 动画的时长
    duration: 2000,
    // 延迟时间
    delay: 500,
    // 动画开始的位置，''bottom'', ''left'', ''top'', ''right''
    origin: ''top'',
    // 回滚的时候是否再次触发动画
    reset: false,
    // 在移动端是否使用动画
    mobile: false,
    // 滚动的距离，单位可以用%，rem等
    distance: ''200px'',
    // 其他可用的动画效果
    opacity: 0.001,
    easing: ''linear'',
    scale: 0.9,
  });
},
// 将自定义的类名添加到html代码中
<ul>
    <li class="reveal-top">
        <img src="" class="img">
    </li>
    <li class="reveal-top">
        <img src="" class="img">
    </li>
</ul>

扩展

你可以设置多个scrillReveal 来控制不同区域的回调操作

// 导出配置的scrollReveal
export default function retScroll (data, state) {
  // reveal()的类名可以为id (#reveal-top) 也可以为class(.reveal-top) 名称随意 并且也支持并集class写法 注意必须设置类否则无法使用
  data.scrollReveal.reveal(''#reveal-heard'', {
    // 动画的时长
    duration: 800,
    // 延迟时间
    delay: 500,
    // 动画开始的位置，''bottom'', ''left'', ''top'', ''right''
    origin: ''bottom'',
    // 回滚的时候是否再次触发动画
    reset: false,
    // 延时执行方式（always（一直延时执行），once（只延时执行一次），onload（只在加载时延时执行））
    useDelay: ''onload'',
    // 在移动端是否使用动画
    mobile: true,
    // 滚动的距离，单位可以用%，rem等
    distance: ''10px'',
    // 其他可用的动画效果
    // 执行速度 线性函数啥的
    easing: ''cubic-bezier(0.5, 0, 0, 1)'',
    // 执行方式（缩放）
    scale: 0.9,
    // 执行之前回调
    beforeReveal: function (ele) {
    }
  })
  data.scrollReveal.reveal(''#reveal-introduce'', {
    // 动画的时长
    duration: 800,
    // 延迟时间
    delay: 500,
    // 动画开始的位置，''bottom'', ''left'', ''top'', ''right''
    origin: ''bottom'',
    // 回滚的时候是否再次触发动画
    reset: false,
    // 延时执行方式（always（一直延时执行），once（只延时执行一次），onload（只在加载时延时执行））
    useDelay: ''onload'',
    // 在移动端是否使用动画
    mobile: true,
    // 滚动的距离，单位可以用%，rem等
    distance: ''10px'',
    // 其他可用的动画效果
    // 执行速度 线性函数啥的
    easing: ''cubic-bezier(0.5, 0, 0, 1)'',
    // 执行方式（缩放）
    scale: 0.9,
    // 执行之前回调
    beforeReveal: function (ele) {
    
    }
  })
}

scrollreveal的api介绍

scrollReveal 很强大需要多探索才能使用他强大的特效播客的特效只是基本特效如果有兴趣可以去官方查阅

// 属性：（默认）
           delay: 0,                                // 延时时间
           distance: ''0px'',                         // 执行距离
           duration: 600,                           // 执行时长
           easing: ''cubic-bezier(0.5, 0, 0, 1)'',    // 执行速度
           interval: 0,                             // 执行间隔（时间）
           opacity: 0,                              // 执行方式（透明度）
           origin: ''bottom'',                        // 执行方式（偏移 top:自上而下,bottom:自下而上,left:自左往右,right:自右往左.）
           rotate: {                                // 执行方式（旋转）
               x: 0,                                // x
               y: 0,                                // y
               z: 0,                                // z
           },
           scale: 1,                                // 执行方式（缩放）
           cleanup: false,                          // 暂时不知道是什么东西
           container: document.documentElement,     // 执行容器（后跟元素，填写后只有容器内的元素执行动画）
           desktop: true,                           // 是否在电脑上面执行
           mobile: true,                            // 是否在手机上面执行
           reset: false,                            // 是否重复执行（）
           useDelay: ''always'',                      // 延时执行方式（always（一直延时执行），once（只延时执行一次），onload（只在加载时延时执行））
           viewFactor: 0.0,                         // 视图显示元素百分之多少的时候执行动画（单位：小数，例：0.50 在元素展示超过百分之五十的时候，执行动画）
           viewOffset: {                            // 视图偏移（把视图抽象成元素移动）
               top: 0,
               right: 0,
               bottom: 0,
               left: 0,
           },
           afterReset: function (el) {},            // 重置之后（视图内看不到元素之后，退场动画执行结束之后）
           afterReveal: function (el) {},           // 执行之后（动画已经执行完毕（已完成））
           beforeReset: function (el) {},           // 重置之前（视图内看不到元素之后，退场动画执行结束之前）
           beforeReveal: function (el) {},          // 执行之前（动画开始执行（未完成时））