It occurred to me a while back that it would be pretty easy to make parallax sites with Edge Animate – all you’d have to do is add a little code to sync up the browser’s scrollbar and the animation timeline.
So I whipped up a demo that both demonstrates and explains how to do it. It speaks for itself, have a look:
The only problem is, there are many dozens of lines of this stuff, all with slightly different variable names and methods being called. So I certainly don’t want to change each one manually, and hacking out a find/replace regexp would take longer than just rewriting it.
Multiple cursors to the rescue! The key is to remember that with multiple selections, if you use key shortcuts for jumping to word or line boundaries (like option+arrow keys on mac or ctrl+arrow on windows), they get applied individually for ever cursor. So you can carry out lots of parallel edits even when the target words are different lengths and in different places.
Here’s what it looks like:
Neat huh? Remember, selecting multiple instances of the same word is ctrl+B / ⌘+B. Apart from that I’m just copy/pasting and jumping the cursor to word and line boundaries.
A while back many of us saw this supercrazy Japanese music video, which shows how awesome it can be for HTML animations to play back in sync with an embedded video. But hand-coding this kind of content wouldn’t be much fun, so I thought I’d share how to visually author similar effects with Edge Animate. For the code and source see below, but first here’s the video tutorial:
Note! I made a few code updates since finishing the video – details at the end of the post.
If you want to try it out, below are some resources to get you started: Continue reading →