Vue3 scrollRevea组件使用方法

介绍

Vue3 使用scrollReveal组件 结尾有Vue2的方法

scrollReveal组件是什么

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

我们看看实际效果吧

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

scrollreveal的api介绍

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

// 属性：（默认）
           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) {},          // 执行之前（动画开始执行（未完成时））　
　　

扩展

• 你可以设置多个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) {
    
    }
  })
}

建议

• 不建议在二级页面使用distance: '10px',滚动的距离 和 scale: 0.9,缩放
• 建议使用负数的滚动距离 distance: '-10px',

参考文献

vue使用scrollReveal滚动插件 (opens new window)

scrollreveal.js中文api (opens new window)