treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Motion Blur Possible With jQuery?!

  • Hi

    I'm currently working on a one-page website with links that scroll up/down on the page it already uses a smooth scrolling plugin but I also want to add a little motion blur effect.. I've heard this is possible with jQuery but I can't find any plugins that do this, please help!

  • Hi- My initial impression when reading this is that it is pretty much impossible to do this sort of thing with jQuery alone, as you are just positioning elements on the page, and animating their position by injecting CSS rules via javascript using jQuery.

    However, with a quick google search I was able to locate this post on StackOverflow.

    It would appear from what people are saying, that there are other ways of accomplishing this task without the use of jQuery alone, because as I said before, jQuery isn't really capable of doing something like that. The first method I've seen is to switch out the elements with blurred copies when animating, but that can be a little tedious. The second thing people are auggesting is blurring using the HTML5 canvas, as per this article.

    As for accomplishing this sort of thing with links, it might be more challenging, but you might be able to accomplish the effect with replicating CSS3 text-shadows on the linked items varying levels of transparency to simulate motion blur samples.

    Also, be advised that all of what's discussed above is very new tech and is likely to not work across all browsers, espacilly those that aren't current releases.

    Hope this is a good start to approaching this problem.

    -N.

  • MooTools can do this with it's Transition effect.

    See: http://demos111.mootools.net/Fx.Transitions