视差引擎Parallax.js使用文档

jch

发布于 2022.08.25 10:26 阅读 1666 评论 0

视差引擎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>

发表评论