Vue.js的CSS变量视差指令 - vue-css-variable-parallax

Vue.js的CSS变量视差指令 - vue-css-variable-parallax
插件名称 vue-css-variable-parallax
发布时间 2020年10月5日
插件作者 nobrefelipe

Vue CSS变量视差库允许您在元素到达视口时使用CSS变量来创建强大的视差效果,–scroll-amount css变量将附加到该变量,并通过滚动量进行更新。

安装和下载:

# Yarn
$ yarn add vue-custom-properties-parallax

# NPM
$ npm install vue-custom-properties-parallax --save

用法

在CSS中,我们有一个--multiplier变量,它将管理速度和方向。

<template>
  <div v-custom-properties-parallax class="parallax">
    <img src="/parallax-image.png" />
  </div>
</template>

<style>
  .parallax {

    /*
     * 所有的逻辑都由CSS处理。
     */
    img {
      --multiplier: 0.1;
      --opacity: calc(1 - calc(var(--scroll-amount) * 0.002));
      --translate: calc(var(--scroll-amount) * var(--multiplier) * 1px);
      opacity: var(--opacity);
      transform: translateY(var(--translate));
    }
  }
</style>