vue2项目中使用滚动skrollr 插件加动效

原创已于 2022-08-04 11:13:13 修改 · 531 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2022-08-03 15:34:01 首次发布

vue 同时被 2 个专栏收录

7 篇文章

订阅专栏

插件

2 篇文章

订阅专栏

本文详细介绍了如何通过npm安装并使用skrollr插件，包括页面注册、CSS样式设置和生命周期管理。特别提到动画在路由切换后的复用问题及解决方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 安装skrollr插件

npm i skrollr  --Saver

2.再使用的页面注册

import skrollr from "skrollr";


export default {
  name: "skrollr",
  components: {
    // Parallax
  },
  data() {
    return {
      wrappara: "wrappara",
      skrollrobj: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.skrollrobj = skrollr.init({
        forceHeight: false,
        smoothScrolling: true,
        smoothScrollingDuration: 500,
        easing: {
          vibrate: function (p) {
            return Math.sin(p * 10 * Math.PI);
          },
        },
      });
    });
  },
};
</script>

3.0在写好的样式上面填写相应的样式

  <div   class="prel"
          data-150-top="opacity: 1;left: 0px;"
          data-400-top="opacity: 0;left: -400px;"
        >
          <img
            class="componyImg"
            style="width: 100%; height: 100%"
            src="@/assets/images/product/img.png"
            alt=""
          />
        </div>

.prel {
  position: relative;
}

4.0注意具体的可以参考skrollr 官网插件

5.0这样设置的话切换路由再切换回来的时候会动画就不生效

 beforeDestroy() {
 // 在这里面自动销毁
    let instance = skrollr.get();
    instance.destroy();
  },

再次切换回来的时候动画依然生效