Code Snippet: Der einfachste Weg Parallax mit JavaScript und CSS zu realisieren

Hier der JavaScript-Teil:

window.addEventListener("scroll", event => {
    document.body.style.backgroundPosition = "0px -" + (window.pageYOffset / 2) + "px";
});

Und hier wie der CSS-Teil aussehen könnte:

body {
    background-image: url(./images/bg1.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed; // das ist wichtig
}

 

Ein Beispiel, wie das Ergebnis aussehen kann:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.