vue视差滚动_Vue.js易于使用的鼠标视差组件

vue视差滚动

vuejs-鼠标视差 (vuejs-mouse-parallax)

An easy to use Mouse Parallax Component - Made with Vue.js

一个易于使用的鼠标视差组件-由Vue.js制成

View demo 查看演示 Download Source 下载源

用法 (Usage)

In order for the effect to work, the should be contained within

为了使效果发挥作用， 应该包含在

Options can then be passed to like so :

然后可以将选项传递给 像这样：

// App.vue

<parallax-container>

    <parallax-element :parallaxStrength="-5" :type="'translation'">
        <h2>Put your content here</h2>
     </parallax-element>

</parallax-container>

道具 (Props)

Prop	Type	Default Value	Description
parallaxStrength	Number	10	Strength of the Parallax Effect
type	String	'translation'	'translation' - 'rotation' - 'depth'

Struts	类型	默认值	描述
视差强度	数	10	视差效果的强度
类型	串	'翻译'	'翻译'-'旋转'-'深度'

构建设置 (Build Setup)

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# run unit tests
npm run unit

# run all tests
npm test

翻译自: https://vuejsexamples.com/an-easy-to-use-mouse-parallax-component-with-vue-js/

vue视差滚动