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

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:

Previous post
Mit diesem Hack verbesserst du die User Experience von CodePen

Next post
Code snippet: The easiest way for a parallax background with CSS and JavaScript