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: {
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.
Search WWH ::

Custom Search