Skip to content
HUD made only with css/js/html
CSS HTML JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
fonts
img
scripts
styles
README.md
index.html

README.md

CSS HUD

We had an assignment in dev class, make a futuristic HUD. I had no idea of what to do at first so I added a constraint to myself, make it minimalistic too. I went for the black & white approach. I wanted to make it as beautiful as I could with only those two colors. The goal was also to show that we could do complex animation. I didn't want to make too much animation as I feel it could be overbearing. So I tried to keep it simple, but also interesting.

Requirements

  • A resolution of at least 1280 x 720 px.
  • A modern browser (Chrome, Edge, Firefox & Safari).
  • A functioning mouse.

Features

  • Rain effect : Make it rain ! You can change the speed of the wind in the menu.
  • Ripple effect : Make it ripple ! You can change the size of the ripple in the menu.
  • Wave effect : Make it wave ! All right, it's not really a wave but I had no idea of how to name it.. you can have either an animation or a hover effect, you can change that in the menu.
  • Cube effect : Make it square ! It's the 3-d cube that we've seen in class, nothing new, except that you can have two.. so it's kinda better.
  • The menu : By clicking the right arrow, the menu appears. There's is a lot of option that you can test.
  • The main HUD follows your mouse !
  • It is responsive until a certain resolution, then, a little message appears.
  • The rain drops are generate in js at launch, that's why we have a loading screen, just for the drops to fall down.

Ressources

I used the Ailerons typeface for this project.

Usage

You can go see the project on my website.

Versioning

See on github.

You can’t perform that action at this time.