/sportsleaderboard

A sports event leaderboard in the style of television broadcast leaderboards, built in 2020, styled on the London 2012 Olympics.

Primary LanguageCSS

Sports Leaderboard

A sports event leaderboard in the style of television broadcast VTR leaderboards, built in 2020, styled on the London 2012 Olympics.

Built in 24 hours, this was designed for a creative project for Festival Stoke to showcase the leaders in an online 'Creative Olympics' during the coronavirus pandemic.

This project was created by Fully Booked Theatre an interactive children's dance theatre company.

Design

Animations need to move in a particular order, based on previous Olympic leaderboards for sporting events.

Stretch Goals

On a standard Olympics VTR of the kind seen in Rio in 2016 and the London 2012 Olympics, the animations run in this order. I wasn't quite able to implement all of these animations, but this is something I could look at doing in the future.

  1. Logo of event flip in Y (so, turning from face down left to face up right).
  2. Transition fade in of outline title bar from left to right.
  3. Colour fade in through title bar left to right.
  4. Fade in of event title left to right, one letter at a time.
  5. The word 'Leaderboard' appears immediately underneath title and Olympics logo appears within right hand side of of title bar, simultaneously.

All title bar animations complete, next comes the list of players / teams.

  1. Expand in down blank list item.
  2. Transition down player name and position and fade in country (three letters, e.g. KAZ for Kazakhstan).
  3. Transition left to right player country's flag and expand next blank list item.

Repeat 6 - 9 until leaderboard complete.

Extra details - each list item must alternate in colour.

Link to the Men's Road Race at Rio: https://youtu.be/rGyd8YmulWk?t=115

Also to add: Gulp and Watch. So far the watch will work and build the file, but there are a few additions such as minification that I would like to incorporate.