跳至主要內容

Parallax来制造视差效果

bluestudyhard小于 1 分钟

简单介绍&github 地址

githubopen in new window
palallax 是一个简单的视差 js 库,老东西了,很轻量,npm 可能都不太行了,然后使用就是通过在 html 上,用 data-depth 设置层级,然后在 js 里面监听 scene 然后调用就能用了
简单示例

<div id="scene">
    <div data-depth="0.2">My first Layer!</div>
    <div data-depth="0.6">My second Layer!</div>
</div>
<script>
    // 运行视差
    let scene = document.getElementById('scene');
    let parallaxInstance = new Parallax(scene, {
        relativeInput: true,
        clipRelativeInput: false,
        hoverOnly: false,

    });
</script>

属性表,看这个就够了

效果

https://github.com/bluestudyhard/myToysopen in new window