Nerdy Navigation

jParallax plugin for cool Webcomic effects

Home Forums General discussion Web Comics jParallax plugin for cool Webcomic effects

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #23635

    I emailed the folks at DeepComix about how to go about working in their app, and they never responded. So I started googling around for parallax effects to see what was out there, because it was pretty obvious to me that they were getting their cool effects just positioning the layers against each other and using the accelerometer on the iPhone (also pinch/zoom and swipe nav, but that’s neither here nor there).

    So I found a plugin using jQuery called jParallax and I decided to download it and see if I could get it working. I took a few pieces of art I had laying around, the first was a panel from a comic I’m working on with Hex that I modified heavily so that it would be a direct replacement for the images in the supplied project:
    Original Panel
    The second one I tried was from my webcomic that has been on forever hiatus called 20,000 Leagues Under the Sea vs Mecha-Cthulhu (which is pretty much just what it sounds like):
    Second Panel
    The last one I thought it might be fun to try and add in some simple animations to some of the layers and see what that might do, this is a Steampunk Willie image I did after a quick image search turned up almost no hits for that seemingly obvious mashup (and you may recall from the ginormous art thread of ye olde forume):
    Third Panel
    None of these images began life as something that was designed to be presented in this way, so they each have their own issues with how they behave. I’d like to try making one from scratch specifically for presenting like this next.

    So far I’ve had a lot of fun making these, but right now I’m not entirely sure it would be viable to deliver a webcomic with this specific plugin for a few reasons. The first is that it’s difficult to predict exactly how much motion you’re going to get out of a given layer. The way it determines layer speed is by establishing a “viewport” using CSS of a fixed size that occludes the layers below it. You then make the layers various sizes in relation to this viewport, and the larger layers get more motion. I don’t have a good feel for exactly what the ratio is (pretty sure you can change it in the javascript, but I’m not that comfortable navigating js files and this one is not very thoroughly commented) so I spend a lot of time trial and erroring my way to an acceptable amount of motion.

    Another problem with the viewport behavior is that I haven’t thought of a good way to run multiple panels on the same page. I tried loading up more than one of these into a carousel, but it just incorporated all the carousel bits into the parallax effect and was unuseable. So you could design your comic one panel at a time (which is fine, and possibly even desirable), but I don’t have a way right now to do say three panels on the same page, since there is just the one viewport. So pagination would involve giving every panel its own corresponding html page and folder of component images, and that would quickly become impractical on a comic project of any size. That also precludes you from using most of the free hosting sites like for instance, since those really just let you upload single images per page I think, and not set up elaborate folder structures for javascript and html.

    Another obvious issue is that you get 0 functionality from a touch screen, since the parallax effect is on mouse-over. So you’re making these for a desktop user, unless somebody builds a native app that can make use of the accelerometer in tablets and phones like the DeepComix folks did.

    Anyway, I thought it was pretty cool, and it’s not super hard to get it up and running, so maybe somebody out there who knows more about javascript than me can figure out a way to optimize this for comics.


    I thought I’d pass along that I heard back from the DeepComix people, took about 2 weeks. This email seems to imply they are sticking with established names at the moment, but I sent them my parallax experiments and asked if they were interested in pitches at all. Here is the email I received:

    Hi Max,
    apologies for the late reply, we have been a bit overwhelmed by the amount of feedback.

    Great to hear you were impressed by our Teaser App.

    Our plan at the moment is to collaborate directly with publishers or independent artists to create more DeepComix content. We already have a few projects in development and are evaluating a few more to start soon, but we are very interested to hear from artists such as yourself.

    At the moment we are not planning to release the editing tools and the app engine to third parties although this may change if we felt that the demand was there.

    I hope this answers some of your questions.

    Thanks for your great feedback!


    It may also be of interest to note that I have this same thread going on Mark Waid’s Thrillbent forum, and he blogged about it the other day:

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.

Random Nerdy Show Network Posts

Skip to toolbar