Quickly add animations to your WordPress blog.

Direction buttons:

Move forward Move back

The Bicycle animation is made of 3 images. The calculation of the rotation creates this effect. The animations are triggered on each button by event OnClick.

HTML - Copy and Paste the HTML into a post, page or text widget (add full URL to images).

<style type="text/css">
#twiz-bike-box {
    width: 730px;
    height: 350px;
    display: block;
}
#twiz-bike-box img {
    display: none;
}
#twiz-nav {
    height: 35px;
    display: block;
}
</style>
<div id="twiz-bike-box"><div id="twiz-nav"><button id="twiz-forward">Move forward</button> <button id="twiz-back">Move back</button></div><div><img id="twiz-bicycle-frame" title="" src="../wp-content/uploads/twiz-bicycle-frame.png" alt="" width="185" height="236" /><img id="twiz-bicycle-back" title="" src="../wp-content/uploads/twiz-bicycle-back.png" alt="" width="120" height="120" /><img id="twiz-bicycle-front" src="../wp-content/uploads/twiz-bicycle-front.png" alt="" width="250" height="250" /></div></div>

• twiz-bicycle-frame.png
• twiz-bicycle-front.png
• twiz-bicycle-back.png

Upload JavaScripts into the Welcomizer Library.

• jquery-animate-css-rotate-scale
  - jquery-animate-css-rotate-scale.js
  - jquery-css-transform.js

* It’s not working on IE < 9.