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

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();
  },

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