Jump to content

Can html5 create motion comic?


Recommended Posts

We've just made one for a client (not released yet) which was an action comic, first part is 12 pages on paper, ended up slightly different on the web.

We had a continuous ambient soundtrack but it did play animations when you reached certain points on the scroll, certain parallaxed parts and speech bubbles appearing, that sort of thing, nothing too complex.

I did it fairly simply, listened out for scroll events, got the scroll position and reacted accordingly. All animations were tied to the scroll position, but this never worked out janky or ugly and I added an auto-scroll which was super smooth, although it was fun to scroll up and down and watch the animations anyway. If you find that a bit heavy then you can just trigger animations when you reach certain scroll positions.

I dont use jQuery (no need for it these days), so this was all done in vanilla, but I think there are numerous jQuery plugins/modules (waypoint maybe?) for listening out for scroll position and triggering events if thats more your thing.

I treated the scroll events as a stream of scroll positions (limited to roughly 60 per second as that was granular enough), but you have to use a little 'shield' around values as when you scroll it is not linear i.e. testing for scroll position === 800 may not work, use 790 < y < 810, or as close as you need.

With regard to playing sounds instead of/as well as animations, you can either use one large sound file and play sections of it at a time (2.7 to 3.2, for example) or use lots of little files, if you use lots of little files you'll probably want to preload them so they'll be available when you need them, for the large audiosheet (its analogous to a spritesheet) you just need to make sure your 'first' sounds are packed at the start and that enough of them are loaded so you can begin.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...