Discussion on jLayers - Mouse Driven Animation Plugin


flGravity supports this item


This author's response time can be up to 5 business days.

17 comments found.

Don’t know where I would use it :) but looks great!

:) Thanks! You can create site backgrounds composed from few layers where more distant layers move slower that those in front, various scrollers (vertical, horizontal) where content position depends on where is your mouse within scrolling area. Actually everywhere where it comes to applying offset to objects as result of mouse movement (or mouse position).

I wrote this plugin a while back – http://nuvushift.nrcstudios.info

Good work, NuvuScripts! But I would recommend you to optimize your plugin as it causes CPU load up to 50% in FF (3.5.17) and the animation sometimes is not smooth. My plugin for example works faster and uses 17-20% CPU

It does run smoother because it is all native javascript – mine was written based around the jQuery framework. It is about 90% jQuery so it is extremely easy to follow and edit but does take a hit in performance. Good Work on your plugin – it is impressive. -Nolan

Thanks! I appreciate! :)

Great file, very easy to implement!

Could you suggest the best way to have the jLayers placed behind content?

Thanks, Dave

You need to put your content in div and set its position to fixed, relative or absolute. jLayers container has a ‘fixed’ position by default. If you want to place jLayers container behind the content you need to do this:
    <div class="jlayers" id="layer1"><!-- jLayers conteiner --></div>
    <div id="content" style="position:relative;"><!-- your content goes here --></div>

or you may use z-index style property in divs. Then you don’t need to place jLayers container div before content div.

Hi, I cannot seem to get the horizontal menu function to work. I’ve modeled my menu item after the code you have on the demo site (not the downloaded demo) I have this script in the header <script type="text/javascript"> window.onload=function(){ var conf = { catchGlobalMove: true, offsetX:[10,100,-80,-80,15,60,30,-40,0], offsetY:[0,40,-40, -20,0], alpha:[1,1,1,1,0.8,1,0.9,0.95,0.95], easingRate: 50 }; jLayers('jl',conf); var s = jLayers('horizontal_slider',{offsetCenter:'left',easingSpeed:3}); window.onresize = function(){ s.offsetX = jLayers.documentSize().width-jLayers.layerSize('horizontal_menu').width; } window.onresize(); //once all is loaded show content document.getElementById('jl').style.visibility='visible'; document.getElementById('horizontal_slider').style.visibility='visible'; } </script>

I am trying to use the slider as a sliding menu at the top of a page.


for slider you need only this code in header:
<script type="text/javascript">
        var s = jLayers('horizontal_slider',{offsetCenter:'left',easingSpeed:3,cssTop:'70%'});
        window.onresize = function(){
            s.offsetX = jLayers.documentSize().width-jLayers.layerSize('horizontal_menu').width;
slider is created as single div container
<div class="jlayers" id="horizontal_slider">
   <div id="horizontal_menu">
         <!-- here comes content of slider -->

also to make slider look as in Preview you need to style it properly. If you will have any other questions please contact me using mail form on my profile page

It’s well done. but I have problem with IE 8 .0. keep loading and black blank screen. any solution?

Thanks for purchase! Please contact me using mail form on my profile page and give me URL to the blank page

Hey all,

Bought this about 45 mins ago as I have some ideas and it is only $7. Just about gets you a pint of larger here in the UK.

For those wondering what you can do with this, I had a play around with it, I know it doesn’t look that great, but was just testing its capabilities :)


So in 45 minutes I believe I have grasped the basics and it’s doing what I want it to do. So a very happy chap here.


Great looking plug-in, any chance of getting this working so it works with touch screen devices such as the ipad?

Cheers Vic

I don’t have iPad. Going to buy it soon. Once I will have it I think I will get jLayers work on it :)

Cool – let me know when you have it working and I will buy.


Which JavaScript libraries does this plugin use?

this is pure javascript. No library is needed


Have loved playing with this and it works perfectly. Thankyou.

I have not perfected it yet, and have not used it on a live site yet, although I have had great fun with it – worth $7 just for the play I have had. Seems to work (with minor variations) in all the browsers too. I will no doubt find a use for it some time soon.

Thankyou and great work.

Paul. (Rated 5 stars)

Thanks, Paul !! :)

I just purchased this and was hoping to get the same file as your preview file. Would you be able to send me the files from your preview page? I’m interested in having the layers laid out like that with the slider. Your sample file is good, but doesn’t look like that at all. Thanks! Please email to karen@yungraphik.com

Thank you for purchasing my file. Actually, you can look at page source in any browser or save preview page. Also if you would need any assistnace, I can explain how to make scroller with jLayer. But please send me email using mail form in profile. Thank you

I’m having an issue with a site I am working on. The horizontal scroller conflicts with the natural page scroll bar/ mouse wheel and doesn’t allow it to scroll. The only way to move down the page is with a down arrow key on the keyboard. Any ideas why jLayers would conflict like that?


Try to set relative position on “horizontal_slider” jlayes DIV , then it will be properly positioned in page flow. Also you need to fix your header menu, as it hides body scrollbars. You can for example push “main” div down by setting its top position to 115px (header menu height).

Thank you!

Hello, i found a bug, or maybe i cannot configure your plugin properly. Live demo is here: http://new.helsinkigroup.cz/eshop/helsinki Screenshots what i mean: http://new.helsinkigroup.cz/bug1.jpg http://new.helsinkigroup.cz/bug2.jpg I try to describe what is going on: left menu of products is using jLayers, it has exact height which is not changing during window resigin. While you scroll to bottom of page, there is no problem and you can easy get to first and last product, but while you are ontop of page, you cant see full container of first product even if your mouse is ontop of the jLayer container. I hope you can understand what i mean.

Here is the demo of what i wanted to achieve: http://develop.hgda.cz/4deco/deco/ see the thumbs under slideshow. Just wanted to achieve this using jLayers and the vertically.

The code of jLayer:
        var $count = $("#eshop-product-menu ul li").length - 3;
        var $offY = 175 * $count;
        $("#eshop-product-menu ul").css({'top': -($offY/2) + 15});
        jLayers('eshop-product-menu', {
                offsetX: 0,
                offsetY: -$offY,
                easing: 0,
                offsetCenter: 'left top'
I hope you will be abble to help me with this issue, because otherwise i am more than happy with your plugin. Anyways if you dont want to solve this in commens you can leave me mail to mikes@vividsolutions.cz

Thanks you too much. Best regards, Jan Mikeš.

I sent email to mikes@vividsolutions.cz to finally check your problem closer.

I havent received any email from you yet, but that address is correct. Could you please resend it?

I sent email again

Can I simply use this to fire up a link associated with each item in the item?

Is it easy to add or remove content dynamically?

You must run plugin with specific amount of layers. Adding layers dynamically is not supported.

Thank you for your answer. I will still have it bookmarked because I am pretty sure I will need something like this someday.

Hi, I bought this app. but the only thing is 4 box flying around. Not the live deme. Live demo has slider, background, difrent movements… did I do something wrong…

No, you didn’t. If you want you can check my preview page source code and even save for your needs.

flGravity is it possible to use this plugin, that when the user moves the mouse around the background image shows? thank you.

sorry. What I meant to say was this: when the mouse moves the background image changes. thank you

Not exactly. What my plugin does is it moves images in layers with different speeds when user moves mouse pointer around the screen.