« Go back to the main page

This page features examples of how to animate your websites via CSS Effects and the JavaScript library mootools. Mind that this aims at the web developer not knowing much about JavaScript.

elementA
div#elementA {
  background-color: #FF6600;
  cursor: pointer;
  height: 50px;
  padding: 10px;
  width: 280px;
  -moofx: normal;
}

div#elementA:hover {
  background-color: grey;
  color: rgb(230, 230, 230);
  margin-left: 20px;
  padding: 10px 5px 10px 5px;
  width: 320px;
}

elementB

h2#elementB {
  cursor: pointer;
  margin: 0em;
  -moofx: 2000ms color, padding-left
    cubic-in-out;
}

h2#elementB:hover {
  color: rgb(200, 200, 200);
  padding-left: 0.8em;
  -moofx-duration: 500ms;
}
elementC
div#elementC {
  -moofx-property: background-color bounce-out;
}

#elementC {
  background-color: yellow;
  cursor: pointer;
  padding: 10px;
  width: 200px;
  -moofx: long width !important;
  -moofx-transition: linear;
}

div#elementC:hover {
  background-color: red;
  width: 400px;
}
elementD (focus)
a#elementD {
  color: blue;
  -moofx: normal;
}

a#elementD:hover {
  color: red;
  -moofx: long;
}

a#elementD:focus {
  color: pink;
}

a#elementD:active {
  color: green;
}
#elementE {
  background-color: #EEEEEE;
  border: 1px #CCCCCC solid;
  -moofx: short;
}

#elementE:hover {
  border-color: #666666;
}

#elementE:focus {
  background-color: white;
  border: 1px #CCCCCC solid;
}
Element F
Element F_
Disable first element's effects.
#elementF, #elementF_ {
  background-color: #EFEFEF;
  margin-bottom: 15px;
  padding: 5px;
  -moofx: normal;
}

#elementF:hover, #elementF_:hover {
  cursor: pointer;
  padding-left: 100px;
}

This example works not in IE7. Please disable JavaScript instead.

Copyright 2008 © Chris Schneider. Impressum