The banner image is created using two graphics; each graphic is the background to its DIV. The top image has the letters erased out with transparency. The image on the bottom is then resized dynamically using JavaScript creating the movement effect. The image will change on page load or refresh. Another example of the same concept has been re-worked with CSS3 animation properties and no JS.

Another World Cup Page

This page is written in HTML5, JavaScript, CSS3 and utilizes the API at api.football-data.org to retrieve current World Cup tournament data. The API used is written in Angular. The code for this web page is located on Github.

Current Results

World Cup Final 8

The bracket below is another open source library called Bracket World and is written in JQuery. This bracket is currently a work in progress to populate data into it.