HTML and CSS Reference
In-Depth Information
#boat
{
position
:
absolute
;
bottom
:
500px
;
left
:
50%
;
margin-left
:
-210px
;
width
:
420px
;
height
:
194px
;
background
:
url(images/boat.png)
no-repeat center
;
-webkit-transition
:
all 5s linear 1.5s
;
-moz-transition
:
all 5s linear 1.5s
;
transition
:
all 5s linear 1.5s
;
}
When we add the class
.sail
to it, all I'm doing is changing its
left
property.
#boat.sail
{
left
:
-20%
;
}
The same goes for the
#contact
wrapper with the class
.show
. Except here, I'm playing with
the
opacity
property:
#contact.show
{
opacity
:
1
;
}
CSS3 transitions do the rest of the work.
The JavaScript
Because we are dealing with a
2-D game
, we might want to base it on a JavaScript game
engine, perhaps an existing framework. But the thing about frameworks (excluding jQuery,
which I'm using as a base) is that they are usually good for a head start, but they probably
won't fit your needs in the long run.
A good example is the lightboxes in my portfolio, which provide information about me and are
activated when the user enters a house.
