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

本文详细介绍了如何通过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();
  },

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值