I’ve started this plugin a few months ago after the first “meeting” with jParallax. I was amazed by the idea; it is so simple but still provides a real-life experience. I was thinking about possible usages, but I was quite busy that time so I could not go any further. Then, somehow I obtained some extra time, so I came up with this:
The Plugin
The plugin itself is very lightweight, only a few rows of code. There are two major “functions” which make everything alive: the initialization part sets the timer of the JavaScript engine to a specified frame rate; you can change this value by passing the frameRate variable to the plugin at instantiation. In the next step the plugin binds the mouse movement event to the parent object. The naming may be a little misleading, but it’s trying to say to which object the floating box should be bound to. There is another variable I would like to clarify: the stage. Usually the parent and the stage are the same. But if you want your box float in a different “co-ordinate system” other than the parent’s you have the possibility to do so, just provide a new stage. Back to the mouse event. When the event occurs, the code checks the position of the mouse within the parent object (so NOT the absolute coordinates).
The update function is the responsible for the “flying”. From the cursor position it calculates how many pixels should the box move. This is where the easing is applied. The math:
Delta = (End position – Actual Position) * Easing Factor
Actual Position = Actual Position + Delta
And that’s it. There is an additional motion blur effect which is using the CSS 3 box-shadow and text-shadow properties.
The full option list
parent |
default value is ‘container’, see above |
stage |
default value is ‘container’, see above |
scale |
default value is 0.3, this is a proportional value, showing the relation between the stage and the box. For example: the stage is 200px diagonally, the box can move away with 30px from the center (100px * 0.3 = 30px) in every direction. |
xOffset |
default value is 0, basically it is the same as the left property in CSS |
yOffset |
default value is 0, top property |
blur |
default value is true, should the plug-in apply blur on the object? Note: it adds a box-shadow to the element. If you would like to blur a text-type object (h1, p, etc.) see the isText property below. |
isText |
default value is false, does the blur should be applied on a text-type object? (since you can use the plug-in on a h1 or p for example) |
blurColor |
default value is ‘#888′, the color of the shadow. Could be any valid CSS value (including rgba) |
frameRate |
default value is 33, shows how often the engine should update the animation. |
Additional info
Probably you will notice some performance issues while playing with the demo. I’m still working on the plugin to make it faster. Right now it will eat up at least 30-40% of CPU. With a dual core processor is not a big problem, but on slower computers it could cause some problems. In the demo section you find an HTML 5 version as well. I wrote it to check the differences in HTML 5. Unfortunately I didn’t have time yet, but I promise now I’ll do it as soon as possible. If you are interested in the result please come back later for the updates.
If you have anything to say about the plugin leave a comment or find me in email at info@marcelljusztin.com.
Dude, this is awesome. I will take a look when i have time, i don’t know for sure where it will work… but it will.
Amazing work, thanks for sharing
Thanks for the response Jesus. Hope you find a good way to use it in your work.
Pingback: jQuery Plugin Roundup 15 | tips & tricks
Pingback: TOPGFX » Blog Archive » 25 Insanely Useful Jquery Plugins For Developer & Designer
Hello, is there a download for the HTML5 version?
Hi TTY!
No, I’m afraid; but you can find everything in the source code of the demo page.
Pingback: 30 Useful Jquery Plugins For Developer & Designer » abdie.web.id
Pingback: Handy Jquery Plugins For Web Developers & Website Designers « Get A Company Website
The “Website example” of this plugin kills my Firefox 3.6.8 (99% CPU usage)
Too bad…
cool
great website.
I’m sorry, but this plugin is incredibly unfriendly for scalable use, and for some reasons *avoids* the power of jQuery. Passing a selector to your script is slightly rediculous and memory intensive as well as restrictive. Example: What if I don’t want to use an ID?
jQuery objects should be stored instead of recreating objects based on selectors several times a second. This will drop memory consumption by at least 50%. I have already begun redoing your plugin and will be releasing in on GitHub, I will post link here. I have already decreased it’s size by at least 50%, and it’s memory consumption by at least 25% on my machine, and still optimizing.
Sorry, I lost my edge a bit there. I forgot to say I do appreciate this plugin, the calculations you provided are more than enough for me to be thankful. I suppose my OCD flairs up when I see people writing redundant code, there’s no reason to put your hands through that torture! Anyways, I am working on this plugin and as stated before, I’ll provide an update for you.
Hi,
No worries, I appreciate constructive criticism.
Also I’m glad you found the idea useful and I’m thankful for raising it to a more advanced level
Is it ready, I’d be interested to port this to ActionScript
Hi Christian,
I have the effect implemented in AS3 as well, but it’s not in the state to be published though. You can download it here: http://www.marcelljusztin.com/stuff/jquery-floating-box/Example.rar
We’re a bunch of volunteers and starting a brand new scheme in our community. Your site offered us with useful information to paintings on. You have done a formidable task and our whole community might be thankful to you.
Pingback: 29 Jquery Plugins For Developer | Wordpress New Tricks For Begginers