https://github.com/tomieric/vue-use-parallax

vue3 hooks for parallax
https://github.com/tomieric/vue-use-parallax

Last synced: about 1 month ago
JSON representation

vue3 hooks for parallax

• Host: GitHub
• URL: https://github.com/tomieric/vue-use-parallax
• Owner: tomieric
• License: mit
• Created: 2020-07-14T11:46:40.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2020-07-17T07:31:46.000Z (almost 5 years ago)
• Last Synced: 2025-03-24T12:46:59.868Z (2 months ago)
• Language: JavaScript
• Homepage: https://tomieric.github.io/vue-use-parallax/
• Size: 262 KB
• Stars: 3
• Watchers: 0
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README-zh.MD
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-use-parallax













[EN](./README.MD) | 中文

视觉滚动差异是一种常用的用户交互方式，这里使用 vue hooks 去实现。同时支持 vue3 和 vue2，vue2 需要安装插件 `vue-composition-api`

灵感来源于[Github挂了，它错误页的Parallax效果研究一下？](https://www.bilibili.com/video/BV1Lf4y1R779)

* [demo](https://tomieric.github.io/vue-use-parallax/)

* [vue2 demo](https://tomieric.github.io/vue-use-parallax/vue2-demo/)

## 安装

### Yarn

```bash

yarn add vue-use-parallax

```

### Npm

```bash

npm install vue-use-parallax --save

```

### vue2

```bash

yarn add vue-composition-api vue-use-parallax-v2

```

## 用法

```vue

  


    


      


      
Title

      
Slogan

      


    

  


// Vue3

import { ref } from 'vue'

import useParallax from 'vue-use-parallax'

export default {

  setup () {

    // bg

    const parallaxRef = ref(null)

    const bgRef = ref(null)

    const titleRef = ref(null)

    const sloganRef = ref(null)

    const postRef = ref(null)

    const { setParallax } = useParallax(parallaxRef, [bgRef, [titleRef, 20]])

    setParallax([

      [sloganRef, 30],

      [postRef, -20]

    ])

    return {

      parallaxRef,

      bgRef,

      titleRef,

      sloganRef,

      postRef

    }

  }

}

```

### vue2 & composition-api

```vue

  


    


      


      
Title

      
Slogan

      


    

  


import { onMounted, onUnmounted, ref } from '@vue/composition-api'

import useParallax from 'vue-use-parallax2'

export default {

  setup () {

    const wrapperRef = ref(null)

    const bgRef = ref(null)

    const titleRef = ref(null)

    const heroRef = ref(null)

    const buttonRef = ref(null)

    // onMounted

    onMounted(() => {

      const { setParallax, resetParallax } = useParallax(wrapperRef.value, [bgRef.value, [titleRef.value, 20]])

      setParallax([

        [heroRef.value, 50],

        [buttonRef.value, -20]

      ])

      // destoryed

      onUnmounted(() => {

        resetParallax()

      })

    })

    return {

      wrapperRef,

      bgRef,

      titleRef,

      heroRef,

      buttonRef

    }

  }

}

```

## 属性

`useParallax(elRef: Ref, options: Array<[Ref, number] | Ref>)`

* `elRef` 包裹元素 ref 对象

* `options` 预设绑定移动的子元素及偏移值

### hooks 获取到的行为状态

```js

  const { startParallax, setParallax, resetParallax } = useParallax(wrapperRef.value)

```

* `startParallax()` 注册开始监听鼠标移动视觉偏差，默认初始化调用。若手动 `resetParallax()` 后可手动启动监听。

* `setParallax(options)` 添加新移动子元素配置

* `resetParallax()` 禁用移动视觉效果

### Options 配置

接收一个数组，数组的每项可以为 dom 的 ref 对象，其默认偏移值是 10px，`eg. setParallax([bannerRef])`

若需单独配置 dom 的偏移值则传入一个数组，其中第一项为 dom 的 ref 对象，第二项为偏移值的值，偏移方向相反则传入负数。 `eg. setParallax([bannerRef, [titleRef, 100], [descriptionRef, -50]])`

## 📄 License

[MIT License](https://github.com/tomieric/vue-use-parallax/blob/master/LICENSE) © 2020-present [tomieric](https://github.com/tomieric)