Opdrachten Timing Events

Aftelklok

We gaan een webpagina maken met een aftelklok in seconden tot het volgende nieuwe jaar.

Maak een HTML pagina met de volgende tekst:

Nog … seconden tot Nieuwjaar 2013

Vervang de puntjes door een span tag met een id.

Schrijf de Javascript code om in de span tag een afteller in seconden tot het nieuwe jaar weer te geven:

Leesbaarder presenteren

Zorg dat de afteller het aantal dagen, uren, minuten en seconden weergeeft (voorbeeld: Nog 100 dagen 6 uren 8 minuten 20 seconden tot Nieuwjaar 2013):

Interactie toevoegen

Vervang het jaartal door een tekstveld waarin de gebruiker zelf een jaartal mag invullen:

Weergeven

Vloeiend

Deze opdracht toont hoe je met behulp van wiskunde vloeiende bewegingen kunt weergeven. Aangezien ik jullie de wiskunde wil besparen, gebruiken we de bestaande bibliotheek SmoothMovement.js.

Paneel openen

Maak de webpagina timing/vloeiend.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Vloeiende bewegingen</title>
</head>
<body>
  <span style="cursor:pointer;" id="knop">&raquo;</span>
  <div id="jaargetijden" style="overflow:hidden; width:0px; background-color:#000;">
    <img src="lente.jpg" width="400" height="315" /><br />
    <img src="zomer.jpg" width="400" height="315" /><br />
    <img src="herfst.jpg" width="400" height="315" /><br />
    <img src="winter.jpg" width="400" height="315" />
  </div>
</body>
</html>

Voeg in de head tag het externe script SmoothMovement.js toe.

Zorg dat door het klikken op de span tag met het id knop de functie uitschuiven() wordt uitgevoerd.

De volgende JavaScript code zorgt voor het vloeiend openen van het paneel:

// globaal object met tijdstipberekeningen
var uitschuifbeweging;
// globaal object met het adres van het paneel
var uitschuifelement;
// klik functie
function uitschuiven() {
  // opzoeken adres van het paneel
  uitschuifelement = document.getElementById('jaargetijden');
  // object met beweging van punt 0 tot 400 aanmaken (hier de breedte van het paneel)
  uitschuifbeweging = new SmoothMovement(0, 400);
  // de beweging vloeiend animeren
  // 20 bepaalt de snelheid (< is sneller)
  // updateUitschuiven wordt uitgevoerd op de berekende tijdstippen
  // stopUitschuiven wordt uitgevoerd bij het beŽindigen van de animatie
  uitschuifbeweging.animate(20, updateUitschuiven, stopUitschuiven);
}
function updateUitschuiven(frame){
  // frame bevat de positie van de vloeiende beweging (hier tussen 0 en 800)
  uitschuifelement.style.width = frame + "px";
}
function stopUitschuiven(){
  // functie wordt uitgevoerd na het beŽindigen van de vloeiende beweging
  document.getElementById("knop").innerHTML = "&laquo;";
}

Vul deze JavaScript code aan zodat het paneel bij een tweede klik op de knop gesloten wordt. M.a.w. De knop werkt als een aan/uit schakelaar.

Foto's verkleinen

Zorg dat bij het laden van de afbeeldingen de functie verklein(this) wordt uitgevoerd:

Foto's zoomen

Zorg dat bij het klikken op een verkleinde foto de functie zoom(this) wordt uitgevoerd:

Zorg dat klikken op een grote foto, de foto-afmetingen met een vloeiende beweging terug op één vierde van de originele afbeeldingen brengt. M.a.w. Zorg voor een aan/uit werking bij het klikken op een foto.

Overvloeiende foto's

We maken van de vier jaargetijde foto's één overvloeiende foto.

Zorg dat de foto's naast elkaar worden weergegeven.

Voeg in de head tag het externe script Fader.js toe.

Maak van de div tag met de vier foto's een overvloeiende foto met de code:

var fader = new Fader('jaargetijden');

Activeer het automatisch overvloeien met de code:

fader.setInterval(5);

Bij het verkleinen van de foto's voeg je het adres van de foto's toe aan een array.

Pas de zoom functie aan zodat met een klik op om het even welke foto alle foto's aangepast worden.

Zoek zelf uit waarom het uitschuiven niet meer werkt.

Weergeven