<!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(/res/javascript-es6/ex/parallax/img/pera.png) fixed;
}

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

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

#oranges {
    background: url(/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);