时间戳

首页 > 解决方案 > 水平动画时背景图像被切断

javascript - 水平动画时背景图像被切断

问题描述

我正在尝试在我的网站上制作视差效果，但是当我应用水平动画时，图像会被截断。我该如何解决这个问题，以便图像循环/重复，或者实际上只是在用户向下滚动时显示图像的其余部分。

这是我的代码笔。这就是我想要做的：视差。

HTML

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Alex Phan</title>
        <link rel="stylesheet" href="styles/main.css" />
        <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap" rel="stylesheet" />
    </head>
    <body>
        <div class="parallax-container">
            <div class="ocean-sky layer lax" data-lax-translate-y="0 1, 400 -100"></div>
            <div class="s-clouds layer lax" data-lax-translate-y="0 1, 400 -175"></div>
            <div class="m-clouds layer lax" data-lax-translate-y="0 1, 400 -175"></div>
            <div class="l-clouds layer lax" data-lax-translate-y="0 1, 400 -175"></div>
            <div class="bg-trees layer lax" data-lax-translate-y="0 1, 400 -175"></div>
            <div class="fg-trees layer lax" data-lax-translate-y="0 1, 400 -175"></div>
            <div class="grass layer lax" data-lax-translate-y="0 1, 400 -200" data-lax-translate-x="0 0, 7000 (15*vh) | loop=7000"></div>
        </div>
        <div class="categories-container lax"  data-lax-translate-y="0 1, 400 -300">
            <div class="about">
                <h1>About Me</h1>
            </div>
        </div>
        
        <script src="https://cdn.jsdelivr.net/npm/lax.js" ></script>
        <script type="text/javascript" src="scripts/main.js"></script>
    </body>
</html>

CSS

body {
    color: black;
    /* background-color: #2e2823; */
    background-color: #79caf9;
    margin: 0px;
    padding: 0px;
}

* {
    box-sizing: border-box;
}

.parallax-container {
    position: relative;
    height: 100vh;
    width: 100%;
    transform-style: preserve-3d;
    overflow: ;
}

.layer {
    position: absolute;
    bottom: 0;
    top: 0;
    background-size: cover;
    background-position: center;
}

.ocean-sky {
    background-repeat: no-repeat;
    right: 0;
    left: 0;
    background-image: url("../images/sky-ocean.png");
}

.s-clouds {
    background-repeat: no-repeat;
    right: 0;
    left: 0;
    background-image: url("../images/small-clouds.png");
}

.m-clouds {
    background-repeat: no-repeat;
    right: 0;
    left: 0;
    background-image: url("../images/medium-clouds.png");
}

.l-clouds {
    background-repeat: no-repeat;
    right: 0;
    left: 0;
    background-image: url("../images/large-clouds.png");
}

.bg-trees {
    background-repeat: no-repeat;
    right: 0;
    left: 0;
    background-image: url("../images/bg-trees.png");
}

.fg-trees {
    background-repeat: no-repeat;
    right: 0;
    left: 0;
    background-image: url("../images/fg-trees.png");
}

.grass {
    right: 0;
    left: 0;
    background-repeat: repeat-x;
    background-image: url("../images/grass.png");
}

.categories-container {
    height: 50vh;
    background-color: #151315;
}

.about {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about h1 {
    font-family: calibri;
    line-height: 10px;
    color: #ffffff;
    font-size: 30px;
}

JS

window.onload = function() {
    lax.setup() // init

    const updateLax = () => {
        lax.update(window.scrollY)
        window.requestAnimationFrame(updateLax)
    }

    window.requestAnimationFrame(updateLax)
}

标签： javascripthtmlcss

解决方案

看起来https://github.com/alexfoxy/lax.js 确实支持你需要的东西。

在这里为草，将您的松懈翻译从data-lax-translate-xto 更改为data-lax-bg-pos-x您正在路上！对于需要从左向右滑动的所有背景图像，您可能需要它。

<div class="grass layer lax" 
   data-lax-translate-y="0 1, 400 -200" 
   data-lax-bg-pos-x="0 0, 7000 (15*vh) | loop=7000"></div>

推荐阅读