Document Object Model

Introduzione internet from Bruno Migliaretti

Materiali realizzati durante la lezione

I file riguardano due esercizi che applicano metodi e proprietà legate al Document Object Model:

  • l'eliminazione ciclica di una classe da tutti gli elementi che la contengono col fine di ottenere una animazione in entrata al caricamento della pagina 
  • la realizzazione di una semplice componente javascript riutilizzabile.

animazione.html (file principale)

<!doctype html>

<html>

<head>
  <title>Prove di fade in</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1.0">
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/miostile.css" rel="stylesheet">
</head>

<body class="off">
  <div class="jumbotron bg-sfumato">
    <div class="container">
      <h1 class="off rotazione anim">Prove di animazione</h1>
      <p class="off slide anim">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </div>
  <div class="container">
    <h1 class="off slide anim">Immagini</h1>
    <div class="row">
      <div class="col-sm-4">
        <img src="https://unsplash.it/800/600?image=100" class="img-responsive off zoom anim" alt="Immagine 100">
        <button class="interruttore"></button>
      </div>
      <div class="col-sm-4">
        <img src="https://unsplash.it/800/600?image=200" class="img-responsive off zoom anim" alt="Immagine 100">
      </div>
      <div class="col-sm-4">
        <img src="https://unsplash.it/800/600?image=400" class="img-responsive off zoom anim" alt="Immagine 100">
      </div>
    </div>
  </div>
  <script>
    // Al caricamento della pagina viene eliminata la classe off da tutti gli elementi che la contengono
    // e si ottiene l'animazione in entrata
    window.onload = function() {
      var elementi = document.getElementsByClassName('off');
      // L'opearazione viene ritardata di un secondo per migliorare 
      // la resa dell'animazione
      setTimeout(function() {
        while (elementi.length > 0) {
          elementi[0].classList.remove('off');
        }
      }, 1000);
    }
  </script>
  <script src="js/interruttore.js"></script>
</body>

</html>

Il file html principale carica il foglio di stile del framework bootstrap. Per l'eventuale personalizzaione/aggiunta di stili abbiamo creato una foglio di stile a parte: miostile.css

miostile.css

.bg-darkblue {
  background-color: darkblue;
  color: white;
}

.bg-sfumato {
  background-image: linear-gradient(#003,#800);
  color: white;
}

.anim {
  transition-property: all;
}

.off.dissolvenza {
  opacity: 0;
/*  transition: opacity 1s;*/
}
.dissolvenza {
  opacity: 0;
  transition: opacity 1s;
}
.off.rotazione {
  transform: rotate(-180deg);
  opacity: 0;
}

.rotazione {
  transform: rotate(0);
  opacity: 1;
  transition: all 0.5;
}

.off.zoom {
  transform: scale(0.1,0.1);
  opacity: 0;
}

.zoom {
  transform: scale(1,1);
  opacity: 1;
  transition: all 1s;
}

.off.slide {
  transform: translateY(-50%);
  opacity: 0;
}
.slide {
  transform: translateY(0);
  opacity: 11;
  transition: all 0.7s;
}

.ritardo500 {
  transition-delay: 500;
}

.ritardo1000 {
  transition-delay: 1000;
}

.off {
  opacity: 0;
}


.interruttore {
  width: 80px;
  height: 80px;
  border: 0;
  background-image: url(/img/on-off.png);
  background-position: left top;
}

.interruttore.on {
  background-position: right top;
}

Infine il file che contiene il codice javascript che fa funzionare la componente interruttore.

interruttore.js

// Viene utilizzata una self invoking function perchè le variabili qui utilizzate
// non interferiscano con eventuali variabili locali
(function () {
  // Crea una nodeList con tutti gli elementi con classe interruttore
  var interr = document.getElementsByClassName('interruttore');
  // Assegna ad ogni elemento della lista un gestore dell'evento click 
  // che aggiunge la classe on al bottone se non esiste e la toglie se 
  //invece esiste
  for (var i = 0; i < interr.length; i++) { 
    interr[i].addEventListener('click', function() {
      this.classList.toggle('on');
    })
  }
 })();

 

Torna all'inizio