stackoom
  简体   繁体   中英

Background image gets cut off when animating horizontally

 原文  2020-09-15 02:29:19  1   2    javascript/ html/ css

Question

I am trying to make a parallax effect on my website, but when I apply a horizontal animation, the image is getting cut off. How do I fix this so that the image either loops/repeats, or actually just show the rest of the image as the user scrolls down.

Here is my codepen . This is what I'm kinda trying to do: parallax .

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

2 answers

solution1
 0 ACCPTED  2020-09-15 03:15:04

It looks like https://github.com/alexfoxy/lax.js does support what you need.

Here for the grass, change your lax translate from data-lax-translate-x to data-lax-bg-pos-x and you're on your way! You might want that for all background images that need to slide left to right.

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

solution2
 0  2020-09-15 03:37:58

You'll want to try to play with the width, left, and background-size css rules to get this work.

So quickly:

  • set the grass div width to a large enough number that the edge won't ever reveal itself when scrolling. If you set width to say 400% to make it really wide, then use the Left to drag it back. I set left: -300%; to move all excess to the left side of screen.
  • The background image will stretch 400% times also from the width. So to compensate for that, the background image will be 100% / 4 (width is 100% * 4, so inverse that equation) to keep the aspect ratio of the original image. So width: 400% , and background-size: 25% 100% . 

 window.onload = function() { lax.setup() // init const updateLax = () => { lax.update(window.scrollY) window.requestAnimationFrame(updateLax) } window.requestAnimationFrame(updateLax) }
 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; } .layer { position: absolute; left: 0; bottom: 0; top: 0; right: 0; background-repeat: no-repeat; background-size: cover; background-position: center; } .ocean-sky { background-image: url("https://i.imgur.com/dRNsTvA.png"); } .s-clouds { background-image: url("https://i.imgur.com/cLFED08.png"); } .m-clouds { background-image: url("https://i.imgur.com/ggR1pJX.png"); } .l-clouds { background-image: url("https://i.imgur.com/ZCcbGfH.png"); } .bg-trees { background-image: url("https://i.imgur.com/7dC1bzO.png"); } .fg-trees { background-image: url("https://i.imgur.com/U5fNrqg.png"); } .grass { background-image: url("https://i.imgur.com/mTiG92i.png"); background-repeat: repeat-x; width: 400%; background-size: 25% 100%; left: -300%; } .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; }
 <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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Chrome background image gets cut tooltip gets cut off iFrame Footer gets cut off when browser shrinks Scrolling/fixed sidebar gets cut off when sidebar is very long Post request gets cut off Background image cut off on Sony Xperia Z1 mobile device React native , text getting cut off when i style image moving background image horizontally jqPlot data point gets cut off Horizontal ticker gets cut off prematurely?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM