Categories
Links

Spritely: jQuery Plugin for Sprite and Background Animations

[The movement is extremely smooth, the syntax is simple][link], color me impressed. This wouldn’t been helpful for my [Megaman II Intro in HTML5][mm2] project. May have to revisit that.

[link]: http://www.spritely.net/ “jQuery Spritely | Spritely”
[mm2]: http://extrafuture.com/code/mm2/ “Megaman II Intro in HTML5, jQuery and CSS”

Categories
Posts

Megaman II’s Intro Animation In HTML

Created by yours truly. No Flash, just CSS, HTML5, and jQuery. The animation is very not smooth in Firefox, but works great in Safari and Chrome.

[You can check it out here.][link]

[link]: http://extrafuture.com/mm2/ “Megaman II Intro”

Using the scrollbar to bring the view upward was a stylistic choice, it could’ve just as (if not more) easily done in a single “screen”, but what’s the fun in that? The demo uses the jQuery [backgroundPosition-Effect][plugin] plugin to achieve the parallax scrolling effect, and the new Javascript audio capabilities introduced by the HTML5 group. The timing may not work very well on older machines.

[plugin]: http://plugins.jquery.com/project/backgroundPosition-Effect “jQuery Plugins: backgroundPosition-Effect”