Gå til innhold

proghodet

Medlemmer
 Vis profil  Se deres aktivitet

  • Innlegg

    3

  • Ble med

  • Besøkte siden sist

 Innholdstype 

Innlegg skrevet av proghodet

  1. Hvilke emner er viktigst for IT

    i Programmering og webutvikling

    Skrevet

    På et generelt grunnlag jo si at alle har godt av en god forståelse av grunnleggende ting som variabler, datatyper, funksjoner, arrays og manipulering av dem, conditions, forskjellige type løkker, klasser, objektorientert utvikling... etc :)

    Når det er på plass er det veldig språk- og domeneavhengig hva som er "neste steg".
    Her er et knippe med roadmaps som kan hjelpe, hvis det er en av retningene du ser for deg: https://roadmap.sh/

  3. IT 2 - Animations

    i Programmering og webutvikling

    Skrevet · Endret av proghodet

    Dette er sikkert i seineste laget, og du har sikkert løst den for lenge siden, men jeg kaster gjerne hatten min inn i ringen likevel.
    Jeg så dessverre ikke html-fila før jeg kikket på oppgaven, så jeg har løst den litt annerledes fra ditt forsøk.

    Jeg kuttet opp bildene, slik at jeg endte opp med denne markup'en:

    Spoiler 
    
<div class="container">
  <img src="drop_01.png">
  <img src="drop_02.png">
  <img src="drop_03.png">
  <img src="drop_04.png">
  <img src="drop_05.png">
</div>

     

    Litt CSS:

    Spoiler

      

    
body {
  background-color: #222;
  margin: 0;
}

.container {
  height: 216px;
  width: 223px;
  /* Relativ posisjon på container slik at bildene posisjonerer seg relativt til dette elementet */
  position: relative;
}

img {
  position: absolute;
  top: 0;
}

img:first-of-type {
  z-index: 1;
}

     


    Og til slutt, JavaScriptet som håndterer animasjonsdelen:

    Spoiler 
    
// Kjører scriptet når vinduet er lastet
window.addEventListener('DOMContentLoaded', () => {
  let container = document.querySelector('.container');
  let images = document.querySelectorAll('img');
  currentImage = 1; // holder styr på hvilket bilde vi er på

  window.setInterval((ev) => {
    moveUp(images[currentImage]);
    // passer på at vi ikke går over antall bilder, men heller looper til start
    if (currentImage + 1 == images.length) {
      currentImage = 0;
    } else {
      currentImage++;
    }
  }, 125) // Funksjonen kalles hvert 125. millisekund

  // Går igjennom alle bildene og setter lavere z-index, med mindre
  // det er bildet vi skal flytte til toppen - den får høyere z-index.
  function moveUp(el) {
    images.forEach(image => {
      if (image === el) {
        el.style.zIndex = 1;
      } else {
        image.style.zIndex = 0;
      }
    });
  }
})

     

    Det finnes garantert mer elegante måter å løse det på, men det var mitt forsøk  🤷‍♂️

    Edit: etter å ha kikket litt videre tror jeg hovedproblemet i din oppagve er at hvert bilde i bildefila ikke er like høye. For at det skal fungere med jevne prosenter (0, 25, 50, 75, 100) må hvert bilde være like høyt. Raskeste vei til mål er nok å bare fikse på bildefila.

×
×
  • Opprett ny...