2 Replies - 4672 Views - Last Post: 10 December 2012 - 02:41 AM

#1 mgaines2   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 74
  • Joined: 06-December 12

JQuery Question- motion blurs

Posted 07 December 2012 - 05:17 PM

I am attempting to make buttons "fly in" on my site once it is loaded. To do this, I know how to make them scroll in from the side but to complete the effect, it needs a motion blur. How would you make a motion blur while it is scrolling in from the side?

Correction on my part... They are not much of buttons, they are more of words but are still used in the <a> and <img> tag
Is This A Good Question/Topic? 0
  • +

Replies To: JQuery Question- motion blurs

#2 SpAm101   User is offline

  • D.I.C Head

Reputation: 11
  • View blog
  • Posts: 54
  • Joined: 28-November 12

Re: JQuery Question- motion blurs

Posted 10 December 2012 - 02:26 AM

Hi mgaines2

This may be of some use hopefully :)

Was This Post Helpful? 0
  • +
  • -

#3 Kruithne   User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 442
  • Joined: 28-July 09

Re: JQuery Question- motion blurs

Posted 10 December 2012 - 02:41 AM

Hello there,

After reading your post I was playing about on my development server and came up with the easiest solution I could to achieve this.

We don't want to render the motion blur on the users screen, because that takes more resources for them and could make the site run slower on older machines, so we just need to make it look like we're motion blurring the image.

I used a 200x200 picture of a cat for the example along with an exact duplicate. I opened the duplicate in an editing program (Paint.NET) and added motion blur to match the direction the cat would be travelling with an appropriate strength. Now I am left with two images, one which is blurred and one which is fine.

When you move the image I presume you are using jQuery's .animate() function, this is how I did it at least. I made it so when the animation function was called on the object, I also changed the background (or source, depending of if it's an image or DIV) to that of the motion blurred image. As soon as the animation had stopped, it would revert back by use of the 'after animation' parameter for the .animate() function.

Now, this looks very basic, that's because it is. There is a lot of room for improvement here and I urge you to experiment and come up with the best solution to fit how it should look in your eyes. Some things I played about with briefly are pointed below.

- Have the motion blur stored in a separate DIV over the top which is anchored to the original but invisible, fade it as the image gets faster and fade it out as it gets slower, this way it looks more as though the image is blurring naturally.

- If your image is moving in multiple directions, have multiple blur images and pick the correct one depending on the direction of movement. You could even have them semi-transparent and merge some blur images together on screen if the image travels diagonally at any point.

- Have the blur image longer than the original below it so some of the blur spreads off the sqaure, this makes for a more believable motion blur.

EDIT: Just looked at the jQuery plug-in posted above by SpAm101. While it's a viable solution if you are short on time, I prefer how my attempts looked to the output of the plug-in. :)

This post has been edited by Kruithne: 10 December 2012 - 02:42 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1