Category: Website Design

Alien Quest CSS Animation Test

Alien Quest(2)

Alien Quest(4)

Alien-Quest(3)

Alien Quest

Alien Quest is a website I worked up with CSS & Javascript animations in order to learn how to use them in web development. It is a simple test in movement. The quest starts at the bottom of the page and scrolls up as you click on specific triggers throughout the quest. Start with the launch button and move on with the continue button.

The same techniques could be used to make a browser game, to tell a story using moving characters, or to simply show a user how to navigate a website. Scrolling could be done up or down, in this case I started at the bottom and have the space ship launching up into outer space.

You can see it in action in the video below:

Or visit the site in your browser. (Should work in most modern browsers)

Mike Cooke Splash Page

I wanted to give Bootstrap a try and I wanted to give CSS animations a try so I decided to make a new splash page for my MikeCooke.org URL.

This is the result:

Splash1

Everything on the page except for my circle image was created via css.
Icons created using Font Awesome. They really need a Behance icon 🙂

Animations might be a bit much, but it only happens on load. Animations thanks to the examples by Justin Aguilar

Circles change background color and border on hover.

Should be working in most modern browsers, sorry older IE users.

Splash2


Splash3