<!-- Oorspronkelijk idee van <!-- Alex Homer, Pro ASP.NET Web Forms Techniques, 2004 -->
<!-- Je vind de code en de afbeeldingen op:
https://multimedia-12714-jefinghelbrecht-1.c9users.io/les-13/autootje.html -->
<body>
    <img id="car" alt="autootje" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/104082/animtow2.gif" />
    <img id="car2" alt="autootje met touw" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/104082/animtow1.gif" />
    <img id="banner" alt="banner" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/104082/rodegeest.png" />
    <img id="force" alt="De drijvende kracht" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/104082/force.gif" />
</body>

</html>
#car {
  display: block;
  left: 0px;
  position: absolute;
  top: 49px;
  height: 50px;
  width: 134px;
}

#car2 {
  display: block;
  left: -134px;
  position: absolute;
  top: 49px;
  height: 50px;
  width: 134px;
}

#banner {
  display: block;
  left: -370px;
  position: absolute;
  top: 0px;
  height: 100px;
  width: 370px;
}

#force {
  display: block;
  left: 0px;
  visibility: hidden;
  position: absolute;
  top: 15px;
  height: 40px;
  width: 200px;
}
// declare the global variables
var timer; // reference to window.setInterval timer
var car; // reference to old car image
var banner; // reference to Xrox Car Co banner image
var carLeft;

 window.onload = function() {
            window.setTimeout(startAnimation, 1000);
        }

var startAnimation = function() {
  window.status = 'Welkom op inantwerpen.com';
  car = document.getElementById('car');
  car.style.visibility = 'hidden';
  car = document.getElementById('car2');
 
  // swap to the second car image (no towrope)
  // car.src = document.getElementById('car2').src;
  carLeft = 0;
  banner = document.getElementById('banner');
  bannerLeft = 0;
  // start de interval timer
  // 1 seconde = 1000
  timer = window.setInterval(moveImages, 10);
}

var moveImages = function() {
  carLeft += 2;
  car.style.left = carLeft + 'px';
  banner.style.left = (carLeft - 370) + 'px';

  // als het autootje het einde van het scherm bereikt heeft
  // wordt het onzichtbaar gemaakt en de banner zichtbaar
  if (carLeft >= window.innerWidth) {
    window.clearInterval(timer); // so stop timer
    car.style.visibility = 'hidden'; // and hide it
    // display the slogan image
    document.getElementById('force').style.visibility = 'visible';
   car = document.getElementById('car');
   car.style.visibility = 'visible';
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.