滚动视差-skrollr.js，vue3初使用

安装插件：

npm i skrollr  --Saver

在使用页引入：

<script  lang="ts"  setup>
import { nextTick, onDeactivated, onMounted, ref } from "vue";
import skrollr from "skrollr";
const skrollrobj = ref(null)
onMounted(() => {
  nextTick(() => {
    skrollrobj.value = skrollr.init({
      forceHeight: false,
      smoothScrolling: true,
      smoothScrollingDuration: 500,
      easing: {
        vibrate: function (p: number) {
          return Math.sin(p * 10 * Math.PI);
        },
      },
    });
  })
})
onDeactivated(() => {
  const instance = skrollr.get();
  instance.destroy();
})
<script>

使用方法特别简单：

<template>
  <div class="page-main" data-400="padding-top: 200px" data-600="padding-top: 0px">
    <div class="sky skrollable rendered " data-0="background: rgb(74,74,74); top: 0px"
      data-300="background: rgb(140,201,220); top: 0px" data-600="top: -200px" style="background: rgb(74, 74, 74);">
      <div class="sky-inner">
        <div class="title">
          <img src="@/assets/logo.png" alt="Elaina" class="logo">
          <img src="@/assets/image/stars.png" alt="Stars" class="stars skrollable rendered "
            data-100="top: 10%; left: 22%;" data-300="top: -100%; left: 30%;" style="top: 10%; left: 22%;">
          <img src="@/assets/image/moon.png" alt="Moon" class="moon skrollable rendered " data-100="top: 10%;"
            data-300="top: -100%;" style="top: 10%;">
          <img src="@/assets/image/sun.png" alt="Sun" class="sun skrollable        unrendered "
            data-200="top: 100%; right: 20%;" data-300="top: 10%; right: 0%;" style="top: 100%; right: 20%;">
        </div>
      </div>
    </div>
  </div>
</template>

css:

<style lang="scss" scope>
.page-main {
  width: 100%;
  min-height: 100vh;
  position: relative;
  background-color: #BCAAA4;
}
.sky {
  width: 100%;
  height: 200px;
  background: #8cc9dc;
  position: fixed;
  z-index: 2;
}

.sky-inner {
  width: 80%;
  height: 100%;
  margin: 0 auto;
  position: relative;
  min-height: 200px;
  overflow: hidden;
}

.title {
  height: 100%;
  min-height: 200px;
}

.title img {
  height: 80%;
  position: absolute;
  vertical-align: middle;
}

.title img.logo {
  margin-top: 20px;
  max-width: 197px;
  max-height: 170px;
  left: 0;
}

.title img.stars {
  max-width: 619px;
  max-height: 189px;
  margin: 0 4%;
  left: 22%;
}

.title img.moon {
  margin-top: 20px;
  max-width: 95px;
  max-height: 120px;
  right: 0;
}

img.sun {
  max-width: 163px;
  max-height: 163px;
  right: 0;
}
</style>