2025年vue中视差引擎Parallax.js的使用

科技前沿 • 2025-02-28 07:14 • 阅读 29

大家好，我是讯享网，很高兴认识大家。

视差引擎Parallax.js使用文档

Parallax.js 是一个简单的，轻量级的的视差引擎，能够对智能设备的方向作出反应。在没有没有陀螺仪或运动检测硬件可用的时候，使用光标的位置来代替。

1.使用

npm install --save https://github.com/wagerfield/parallax

讯享网

安装

注：如果安装后引用提示找不到并出现Error from chokidar (C:): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp'错误，使用

讯享网 npm i -s parallax-js

安装

并通过

import Parallax from 'parallax-js';

引入

2.编写HTML元素

讯享网<div class="container"> <ul id="scene"> <li class="layer" data-depth="2"><img src="./img/planet1.png"></li> <li class="layer" data-depth="3"><img src="./img/planet2.png"></li> <li class="layer" data-depth="2"><img src="./img/man.png"></li> <li class="layer" data-depth="5"><img src="./img/earth.png"></li> <li class="layer" data-depth="1"><img src="./img/text.png"></li> <li class="layer" data-depth="4"><img src="./img/planet3.png"></li> <li class="layer" data-depth="8"><img src="./img/planet4.png"></li> <li class="layer" data-depth="0"><img src="./img/planet5.png"></li> </ul> </div>

3.创建实例

var scene = document.getElementById('scene'); var parallaxInstance = new Parallax(scene, { relativeInput: true //指定是否使用场景的坐标系(默认false) });

4.完成运行

光标移动时，图片会跟随着做不同频率的移动，其移动量由data-depth，父容器的尺寸控制；

讯享网

data-invert-x和data-invert-y可以判断是否按反方向来运动层；

data-limit-x和data-limit-y可以设置x或y方向上总的运动量数值范围，数值越大运动量范围越大；

data-calibrate-x和data-calibrate-y用来指定是否根据初始时的x轴的值来计算运动量；

data-scalar-x和data-scalar-y可以控制层运动的灵敏度，数值越高越灵敏；

data-friction-x和data-friction-y设置层运动的摩擦量；

data-origin-x和data-origin-y代表了鼠标输入的x或y原点，默认值是0.5，数值越小的时候，运动层的运动就会越随着鼠标运动，反之，数值越大运动层的运动就会越向着鼠标运动的反向运动。

5.运行效果以及demo源码

讯享网<template> <div class="container"> <ul id="scene"> <li class="layer" data-depth=".2"><img src="./img/planet1.png"></li> <li class="layer" data-depth=".3"><img src="./img/planet2.png"></li> <li class="layer" data-depth=".2"><img src="./img/man.png"></li> <li class="layer" data-depth=".5"><img src="./img/earth.png"></li> <li class="layer" data-depth=".1"><img src="./img/text.png"></li> <li class="layer" data-depth=".4"><img src="./img/planet3.png"></li> <li class="layer" data-depth=".8"><img src="./img/planet4.png"></li> <li class="layer" data-depth="0"><img src="./img/planet5.png"></li> </ul> </div> </template> <script > import Parallax from 'parallax-js' export default { name: "test", components: { }, data() { return { } }, mounted() { this.intscence() }, methods: { intscence() { var scene = document.getElementById('scene'); var parallaxInstance = new Parallax(scene, { relativeInput: true }); } }, destroyed() { }, } </script> <style lang="scss" scoped> body { margin: 0; padding: 0; } .container { width: 100%; height: 100vh; overflow: hidden; background: url(./img/background.jpg); background-attachment: fixed; } </style>