Javascript 水平设置动画时背景图像被切断_Javascript_Html_Css

Javascript 水平设置动画时背景图像被切断

javascript html css

Javascript 水平设置动画时背景图像被切断,javascript,html,css,Javascript,Html,Css,我试图在我的网站上制作视差效果，但当我应用水平动画时，图像被切断。如何修复此问题，使图像循环/重复，或者在用户向下滚动时实际显示图像的其余部分这是我的名片。这就是我想做的： HTML <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="w

我试图在我的网站上制作视差效果，但当我应用水平动画时，图像被切断。如何修复此问题，使图像循环/重复，或者在用户向下滚动时实际显示图像的其余部分

这是我的名片。这就是我想做的：

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>

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;
}

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

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

    window.requestAnimationFrame(updateLax)
}

它看起来确实支持您所需的功能

这里是草地，将lax翻译从

data-lax-translate-x

更改为

data-lax-bg-pos-x

，您就可以开始了！对于需要从左向右滑动的所有背景图像，您可能需要这样做

您需要尝试使用

宽度、左侧和背景大小

css规则来完成这项工作

这么快：

将“grass div width”设置为足够大的数字，以便在滚动时边缘永远不会暴露出来。如果您将宽度设置为400%，使其真正变宽，则使用
```
左键将其向后拖动。我设置<代码>左侧：-300%将所有多余的移动到屏幕左侧
```

背景图像也将从宽度拉伸400%。为了补偿这一点，背景图像将为100%/4（宽度为100%*4，因此与该方程相反），以保持原始图像的纵横比。所以宽度：400% ，背景尺寸：25%100%

window.onload=function（）{
lax.setup（）//init
常量updateLax=（）=>{
lax.update（window.scrollY）
window.requestAnimationFrame（updateLax）
}
window.requestAnimationFrame（updateLax）
}

正文{
颜色：黑色；
/*背景色：#2e2823*/
背景色：#79caf9；
边际：0px；
填充：0px；
}
* {
框大小：边框框；
}
.视差容器{
位置：相对位置；
高度：100vh；
宽度：100%；
变换样式：保留-3d；
}
.层{
位置：绝对位置；
左：0；
底部：0；
排名：0；
右：0；
背景重复：无重复；
背景尺寸：封面；
背景位置：中心；
}
.海洋天空{
背景图像：url（“https://i.imgur.com/dRNsTvA.png");
}
s云{
背景图像：url（“https://i.imgur.com/cLFED08.png");
}
m云{
背景图像：url（“https://i.imgur.com/ggR1pJX.png");
}
.l-云{
背景图像：url（“https://i.imgur.com/ZCcbGfH.png");
}
.bg树{
背景图像：url（“https://i.imgur.com/7dC1bzO.png");
}
.fg树{
背景图像：url（“https://i.imgur.com/U5fNrqg.png");
}
.草{
背景图像：url（“https://i.imgur.com/mTiG92i.png");
背景重复：重复-x；
宽度：400%；
背景大小：25%100%；
左-300%；
}
.类别货柜{
高度：50vh；
背景色：#151315；
}
.关于{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
}
.大约h1{
字体系列：calibri；
线高：10px；
颜色：#ffffff；
字体大小：30px；
}


亚历克斯·潘
关于我

对于背景图像，您可能希望转换

背景位置，而不是转换X（容器div）。不确定您是否可以这样做，但可能（使用css）。乍一看，您使用的视差库可能不支持这一点。它可以工作！非常感谢你。在过去的一周里，我一直在尝试不同的CSS属性，但没有得到它。我想我需要更好地阅读lax文档。再次感谢你。我真的很感激。非常感谢你的解释。我真的很感激。我更好地理解了css规则在左边、背景大小等方面的工作原理。