Code Editor

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="robots" content="noindex, follow">
    <title>Parallax con Javascript | Pablo Monteserín</title>
    <meta name="description"
        content="Programación del efecto paralax en el que tenemos diferentes elmentos de la página web moviéndose a diferentes velocidades usando Javascript">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1>Efecto parallax hecho con Javascript nativo</h1>
    <script src="javascript.js"></script>
    <div id="pinas" class="pinas_and_oranges"></div>
    <div id="oranges" class="pinas_and_oranges"></div>
    <div id="whiteLayer" class="contentLayer"></div>
    <div id="greenLayer" class="contentLayer"></div>

</body>

</html>

body {
  margin: 0;
  background: url(https://pablomonteserin.com/res/javascript-es6/ex/parallax/img/pera.png)
    fixed;
}

.pinas_and_oranges {
  position: fixed;
  width: 100%;
  height: 1800px;
}

#pinas {
  background: url(https://pablomonteserin.com/res/javascript-es6/ex/parallax/img/pina.png)
    100px 200px;
}

#oranges {
  background: url(https://pablomonteserin.com/res/javascript-es6/ex/parallax/img/orange.png)
    50px 200px;
}

#whiteLayer {
  top: 500px;
  background: white;
}

#greenLayer {
  top: 2500px;
  background: green;
}

.contentLayer {
  position: absolute;
  width: 100%;
  height: 100px;
}

parallax = _ => {
    pinas.style.top = -(window.pageYOffset / 5) + "px";
    oranges.style.top = -(window.pageYOffset / 2) + "px";
}

start = _ => {
    pinas = document.querySelector("#pinas");
    oranges = document.querySelector("#oranges");
}

window.addEventListener("scroll", parallax);
window.addEventListener("load", start);