index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Parallax Scrolling Moonlight</title>
    <link rel="stylesheet" href="css/main.css">

</head>

<body>
    <section>
        <img src="img/bg.jpg" id="bg">
        <img src="img/moon.png" id="moon">
        <img src="img/mountain.png" id="mountain">
        <img src="img/road.png" id="road">
        <h2 id="text">Moonlight</h2>
    </section>

    <script type="text/javascript">
        let bg = document.getElementById("bg");
        let moon = document.getElementById("moon");
        let mountain = document.getElementById("mountain");
        let road = document.getElementById("road");
        let text = document.getElementById("text");

        window.addEventListener('scroll', function () {
            var value = window.scrollY;

            bg.style.top = value * 0.5 + 'px';
            moon.style.left = -value * 0.5 + 'px';
            mountain.style.top = value * 1.5 + 'px';
            text.style.top = value * 1 + 'px';
        })
    </script>

    <h5>Parallax Scrolling Moonlight</h5>
    <p>Parallax scrolling is a technique in computer graphics where background images move past the camera more slowly
        than foreground images, creating an illusion of depth in a 2D scene of distance. The technique grew out of
        the multiplane camera technique used in traditional animation since the 1930s.
        Parallax scrolling was popularized in 2D computer graphics with its introduction to video games in the early
        1980s. Some parallax scrolling was used in the arcade video game Jump Bug (1981). It used a limited form of
        parallax scrolling with the main scene scrolling while the starry night sky is fixed and clouds move slowly,
        adding depth to the scenery. The following year, Moon Patrol (1982) implemented a full form of parallax
        scrolling, with three separate background layers scrolling at different speeds, simulating the distance between
        them. Moon Patrol is often credited with popularizing parallax scrolling. Jungle King (1982), later
        called Jungle Hunt, also had parallax scrolling, and was released a month after Moon Patrol in June 1982.
    </p>
</body>

</html>