Løsningsforslag til kapittel 9

Her finner du løsningsforslag, råd og vink til oppgavene i kapittel 9.

9.1.1 Se side 247 i læreboka. Alternativt kan du lage kode og beskrive hva som skjer.

9.1.2
<style>
    .firkant{
        width:40px;
        height:40px;
        background-color:blue;
        transition:all 2s;
    }
    .firkant:hover{
        width:200px;
        background-color:green;
        height:200px;
    }
</style>
</head>
<body>
    <div class="firkant"></div>
</body>

9.1.3
<style>
    #p25deg {
        width:300px; height:30px; background-color: LimeGreen; transform-origin: left bottom; transform: rotate(25deg);
    }
    #p60deg {
        width:300px; height:30px; background-color: LimeGreen; transform-origin:center; transform: rotate(60deg);
    }
    #pdobbel{
        margin: 150px; width: 300px; height: 100px; border: 1px solid black; transform:scale(2);
    }
</style>
</head>
<body>
    <p id="p25deg">Dette er et avsnitt.</p>
    <p id="p60deg">Dette er et annet avsnitt.</p>
    <p id="pdobbel">Dette avsnittet er dobbel størrelse.</p>
</body>

9.1.4 Se øverst på side 253 hvordan du kan legge til animasjon som blir aktivert.

9.2.1 Her har vi tatt utgangspunkt i eksempelet på side 256 og endret bilde og endret litt på transition-egenskapene:
<body>
<div class="container">
    <img src="skog.jpg">
    <article class="infoTekst">
        <h1>Skog</h1>
        <hr>
        <p>En skog er et område som er dekket av trær og busker.</p>
        <a href="https://nn.wikipedia.org/wiki/Skog">Les mer</a>
    </article>
</div>
<style>
    .container { position: relative; width: 400px; height: 280px; background-color: LightGray; border: 14px solid white; /*Pynteramme*/
        box-shadow: 0 0 1px DarkGray; /*Skygge rundt rammen*/
        overflow: hidden; /*Skjuler innhold som havner på utsiden*/
    }
    .container > img { /*CSS til img-elementet som er inni div-elementet*/
        position: absolute; transform: scale(1); /*Bildet er 100 % skalert*/
        transition: 0.5s 0s; /*En overgang varer i 0.5s og har 0.5s forsinkelse*/
    }
    .container > article {/*Teksten om skogen*/
        position: absolute; width: 80%; /*Bredden er satt til 80 % siden padding til sammen er 20 %*/
        height: 80%; padding: 10%; /*Legger til rom fra kantene av et element og inn til innholdet*/
        background-color: DarkGreen; /* Bakgrunnsfarge */
        color: white; /* Tekstfarge */
        text-align: center; /*Midtstiller teksten*/
        transform: scale(0); /*Teksten er skalert til 0 % og er ikke synlig*/
        transition: 0.5s 0s;
    }
    .container:hover > img { /*Animasjonen starter når markøren kommer over div-elementet*/
        transform: scale(0); /*Skalerer bildet ned til 0 */
        transition: 0.5s 0s; /*Animasjonen starter med en gang*/
    }
    .container:hover > article {/*Animasjonen starer når markøren kommer over div-elementet*/
        transform: scale(1); /*Skalerer teksten opp til 100 %*/
        transition: 0.5s 0s; /*Det går et halvt sekund, så skaleres teksten*/
    }
</style>
</body>

9.2.2 Bytt ut "transform: scale(1);" med "opacity: 1;" og "transform: scale(0);" med "opacity: 0;" alle steder i koden for 9.2.1.

9.2.3 Legg på en egenskap til transform. F. eks "rotate(0deg)", "rotate(-180deg)" og "rotate(360deg)". Behold resten av koden fra 9.2.1:
.container > img { 
    transform: scale(1) rotate(0deg);  
}
.container > article { 
    transform: scale(0) rotate(0deg);  
}
.container:hover > img {
    transform: scale(0) rotate(-180deg);
}
.container:hover > article {
    transform: scale(1) rotate(360deg);
}

9.3.1
<style>
    body{
        background-color: white; transition: background-color 2s;
    }
</style>
</head>
<body>
    <input id="fargevelger" type="color">
    <script>
        var fargevelger = document.getElementById("fargevelger");
            fargevelger.oninput = function() { //En hendelsesstyrt funksjon
            document.body.style.backgroundColor = fargevelger.value;
        }
    </script>
</body>

9.3.2
<style>
    h1{position: absolute;}
</style>
</head>
<body>
    <h1 id="overskrift">Dette er en overskrift.</h1>
    <script>
        var overskrift = document.getElementById("overskrift");
        overskrift.onmouseover=function(){
            overskrift.style.transform = "scale(3)";
            overskrift.style.transition="3s";
        }
        overskrift.onmouseout=function(){
            overskrift.style.transform="scale(1)";
            overskrift.style.transition="3s";
        }
    </script>
</body>

9.3.3
<style>
    #divBoks{
        width: 30px; height: 30px; background-color: firebrick; margin-top: 100px; position:absolute;
    }
</style>
</head>
<body>
    <div id="divBoks"></div>
    <script>
        var divBoks =document.getElementById("divBoks");
        window.onclick=function(){
            divBoks.style.marginTop=(event.clientY-22.5)+"px";
            divBoks.style.marginLeft=(event.clientX-22.5)+"px";
        }
    </script>
</body>

9.3.4
<style>
    body {
        padding: 50px;
    }
    #planke { width: 300px; height: 30px; background-color: #F4E9C2; transition: 1s;  margin-top: 100px;
}
</style>
</head>
<body>
    <form id="frmVinkel">
        <input type="number" id="inpVinkel">
        <button type="submit">Sett vinkel</button>
    </form>
    <div id="planke"></div>
    <script>
        var frmVinkel = document.getElementById("frmVinkel");
        var inpVinkel = document.getElementById("inpVinkel");
        var planke = document.getElementById("planke");
        frmVinkel.onsubmit = function(evt) {
            evt.preventDefault();
            var vinkel = Number(inpVinkel.value); //Gjør om tekst-input til tall
            planke.style.transform = "rotate("+vinkel+"deg)";
        }
    </script>
</body>

9.3.5
<style>
    body {
        padding: 50px;
    }
    #divBoks { width: 300px; height: 30px; background-color: #F4E9C2; transition: 1s; margin-top: 100px;
}
</style>
</head>
<body>
    <form id="frmEndre">
        <label for inpBredde>Bredde</label>
        <input type="number" id="inpBredde">
        <label for inpHoyde>Høyde</label>
        <input type="number" id="inpHoyde">
        <label for inpXPos>X-posisjon</label>
        <input type="number" id="inpXPos">
        <label for inpYPos>Y-posisjon</label>
        <input type="number" id="inpYPos">
        <label for inpAvrunding>Hjørneavrunding</label>
        <input type="range" id="inpAvrunding" min="0" max="100" step="1">
        <label for inpFarge>Farge</label>
        <input type="color" id="inpFarge">
        <button type="submit">Endre</button>
    </form>
    <div id="divBoks"></div>
    <script>
        var frmEndre = document.getElementById("frmEndre");
        var inpBredde = document.getElementById("inpBredde");
        var inpHoyde = document.getElementById("inpHoyde");
        var inpXPos = document.getElementById("inpXPos");
        var inpYPos = document.getElementById("inpYPos");
        var inpAvrunding = document.getElementById("inpAvrunding");
        var inpFarge = document.getElementById("inpFarge");
        var divBoks = document.getElementById("divBoks");
        frmEndre.onsubmit = function(evt) {
            evt.preventDefault();
            divBoks.style.width = inpBredde.value+"px";
            divBoks.style.height = inpHoyde.value+"px";
            divBoks.style.marginLeft = inpXPos.value+"px";
            divBoks.style.marginTop = inpYPos.value+"px";
            divBoks.style.borderRadius = inpAvrunding.value+"px";
            divBoks.style.backgroundColor = inpFarge.value;
        }
    </script>
</body>

9.4.1 Når du bruker "left" og "top" istedenfor "margin-left" og "margin-top" må du også bruker "position: absolute" eller "position: relative".
<style>
    @keyframes flytt {
        from {top: 10px; left: 10px;}
        to {top: 200px; left: 200px;}
    }
    div {width: 10px; height: 10px; position:absolute; background-color: darkkhaki; animation: flytt 2s;}
</style>
</head>
<body>
    <div></div><!-- Et tomt div-element -->
</body>

9.4.2
<style>
    @keyframes flytt{
        0% {left:20px; top:30px;}
        10% {left:600px; top:80px;}
        50% {left:400px; top:300px;}
        73% {left:90px; top:240px;}
        100% {left:20px; top:30px;}
    }
    div {width: 10px; height: 10px; position: absolute; background-color: darkkhaki; animation: flytt 2s;}
</style>
</head>
<body>
    <div></div><!-- Et tomt div-element -->
</body>

9.4.3 og 9.4.4 Ta utgangspunkt i eksempelet på side 268-269 og modifiser koden og bruk andre bilder.

9.5.1 og 9.5.2 Nedenfor ser du et løsningsforslag. Kanskje du kan forenkle koden ytterligere ved å definere et objekt som styrer animasjonen som du kan bruke flere steder?

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Prøv selv 9.5.1 og 9.5.2</title>
    <style>
        #container { width: 747px; height: 410px; background-image: url(bilder/bgr.png); position: relative; overflow: hidden;
        }
        #bil {background-image: url(bilder/bil.png); width: 531px; height: 172px; position: absolute;
        }
#bakhjul {position: relative; background-image: url(bilder/bakhjul.png); width: 58px; height: 58px; left: 78px; top: 101px;
        }
        #forhjul {position: relative; background-image: url(bilder/forhjul.png); width: 58px; height: 58px; left: 412px; top: 42px;
        }
    </style>
</head>
<body>
    <div class="knapper">
        <button id="btnStart">Fram</button>
        <button id="btnPause">Pause</button>
        <button id="btnRevers">Revers</button>
        <br><input type="range" min="0" max="5" value="1" id="inpFart">
    </div>

    <div id="container">
        <div id="bil"> <!-- Bilen ligger inne i et div-element -->
            <div id="bakhjul"></div> <!-- Hjulene ligger inne i bilen -->
            <div id="forhjul"></div>
        </div>
    </div>
    <script>
        var btnStart = document.getElementById("btnStart");
        var btnPause = document.getElementById("btnPause");
        var btnRevers = document.getElementById("btnRevers");
        var inpFart = document.getElementById("inpFart");
        var bil = document.getElementById("bil");
        var bakhjul = document.getElementById("bakhjul");
        var forhjul = document.getElementById("forhjul");
        var bilanimasjon = bil.animate([
            {left: "-600px", top: "100px"},
            {left: "60px", top: "100px"},
            {left: "60px", top: "100px"},
            {left: "800px", top: "100px"}
        ],
        {
            duration: 4000,
            iterations: Infinity
        }
        );
        var bakhjulanimasjon = bakhjul.animate([
            {transform: "rotate(0deg)"},
            {transform:"rotate(720deg)"},
            {transform:"rotate(720deg)"},
            {transform: "rotate(1440deg)"}
        ],
        {
            duration: 4000,
            iterations: Infinity
        }
        );
        var forhjulanimasjon = forhjul.animate([
            {transform: "rotate(0deg)"},
            {transform:"rotate(720deg)"},
            {transform:"rotate(720deg)"},
            {transform: "rotate(1440deg)"}
        ],
        {
            duration: 4000,
            iterations: Infinity
        }
        );
        btnStart.onclick = function() {
            bilanimasjon.play();
            bakhjulanimasjon.play();
            forhjulanimasjon.play();
        };
        btnPause.onclick = function() {
            bilanimasjon.pause();
            bakhjulanimasjon.pause();
            forhjulanimasjon.pause();
        };
        btnRevers.onclick = function() {
            bilanimasjon.reverse();
            bakhjulanimasjon.reverse();
            forhjulanimasjon.reverse();
        };
        inpFart.onchange=function(){
            bilanimasjon.playbackRate=inpFart.value;
            bakhjulanimasjon.playbackRate=inpFart.value;
            forhjulanimasjon.playbackRate=inpFart.value;
        }
    </script>
</body>
</html>

9.6.1 a)
    <style>
        body {background-color: saddlebrown;}
        div {float: left; width: 20px; height: 10px; margin-right: 5px; background-color: goldenrod;}
    </style>
</head>
<body>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div> </div><div></div><div></div><div></div>
    <script>
        var divs = document.getElementsByTagName("div"); //Refererer til alle div-elementer
        divs = Array.from(divs); //Gjør om fra nodeliste til array
        var animasjon = [ {transform: 'translateY(0px)'}, {transform: 'translateY(200px)'}];
        var kontrollobjekt = {duration: 1000, direction: 'alternate', iterations: Infinity};
        divs.forEach(function(elem, indeks) { //For hver div
            kontrollobjekt.delay = 100;
            elem.animate(animasjon, kontrollobjekt);
        });
    </script>
</body>

9.6.1 b) Ta utgangspunkt i a). La div-elementene ha lik høyde som bredde. Bruk border-radius og sett den til halvparten av høyden.

9.6.2 Ta utgangspunkt i koden på side 283. Du må tilpasse høyden og bredden til div-elementet som viser animasjonen slik at de passer med bildet med de seks figurene. Tilpass også background-position i animasjonen til minus bildets bredde. 
F. eks bredde og høyde på div-elementen til 213px og background-position til -1280px.

9.6.4 document.getAnimations() er foreløpig ikke implementert i nettleseren Chrome. Den kan løses ved å lenke inn kode for dette. Se første script-element i koden nedenfor.
<!DOCTYPE html>
<html lang="no">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Firkanter</title>
    <style>
        body {
            background-color: saddlebrown;
        }
        div {
            float: left;
            width: 20px;
            height: 10px;
            margin-right: 5px;
            background-color: goldenrod;
        }
    </style>
</head>
<body>
    <section id="container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/61811/web-animations-next-2.2.0.min.js"></script>
    <script>
        var divs = document.querySelectorAll("#container > div");
        var animasjon = [
            {transform: 'translateY(0px)', opacity: 1},
            {transform: 'translateY(200px)', opacity: 0}
        ];
        var kontrollobjekt = {
            duration: 1000,
            direction: 'alternate',
            iterations: Infinity,
            easing: 'ease-in-out'
        };
        var i = 0;
        for(var div of divs){
            kontrollobjekt.delay = i * 100;
            div.animate(animasjon, kontrollobjekt);
            i++;
            console.log(div.getAnimations());
        }
        document.onclick = function() {
            for(var div of divs){
                var animasjoner = div.getAnimations();
                // animasjoner er et array med animasjoner på elementet
                // Vi snur den første (og eneste)
                animasjoner[0].reverse();
            }
        }
    </script>
</body>
</html>