OpracthWebanimatie-ThomasPost

------------------------------------------------------
HTML
------------------------------------------------------

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div id="wrapper">
        <div class="zichtbaar" id="sleutel"></div>
        <div id="deur"></div>
        <div id="textBox">
            <div class="text zichtbaar" id="text1">"De bel lijkt niet te werken, hoe geraak ik binnen?"</div>
            <div class="text" id="text2">"De deur is op slot"</div>
            <div class="text" id="text3">"De buren zijn ook al zombies"</div>
        </div>
    </div>


    <script>
        var deur = document.querySelector("#deur");
        var sleutel = document.querySelector("#sleutel");
        var heeftSleutel = false;
        var text1 = document.querySelector("#text1");
        var text2 = document.querySelector("#text2");
        var text3 = document.querySelector("#text3");

        deur.addEventListener("click", openDeur);
        sleutel.addEventListener("click", sleutelGevonden);

        function openDeur() {
            if (heeftSleutel == false) {
                text1.classList.remove("zichtbaar");
                text2.classList.add("zichtbaar");
            }
            if (heeftSleutel == true) {
                deur.classList.add("open")
                text1.classList.remove("zichtbaar");
                text2.classList.remove("zichtbaar");
                text3.classList.add("zichtbaar");
            }
        }

        function sleutelGevonden() {
            heeftSleutel = true;
            sleutel.classList.remove("zichtbaar");
            sleutel.classList.add("onzichtbaar");
        }
    </script>
</body>

</html>


------------------------------------------------------
CSS
------------------------------------------------------

* {
    margin: 0;
    padding: 0;
}

body {
    width: 100vw;
    height: 100vh;
}

#wrapper {
    position: relative;
    top: 50%;
    left: 50%;
    margin-top: -322px;
    margin-left: -322px;
    width: 644px;
    height: 644px;
    background-image: url(../img/deurpost.jpg);
}

#deur {
    position: absolute;
    top: 150px;
    left: 215px;
    width: 203px;
    height: 455px;
    background-image: url(../img/deur.png);
    transition: all .3s ease-out;
}

#sleutel {
    position: absolute;
    top: 50px;
    left: 560px;
    width: 15px;
    height: 32px;
    background-image: url(../img/sleutel.png);
}
#textBox{
    width: 386.4px; /*60% van de wrapper*/
    height: 64.4px; /*10% van de wrapper*/
    position: absolute;
    top: 20px;
    left: 128.8px;/* zorgt dat het gecentreerd word, breedte van de wrapper - breedte van de textBox delen door 2 --> (644 - 386.4) /2 */
    color: white;
    font-size: 25px;
    text-align: center;
    background-color: green;
}
.text{
    position: absolute;
    top: 0;
    text-align: center;
    width: 100%;
    opacity: 0;
}
.zichtbaar{
    opacity: 1;
}
.onzichtbaar{
    opacity: 0;
}
.open{
    transform: scaleX(-0.2) skew(5deg, 5deg);
    transform-origin: right;
}