CODEWITHSUNDEEP
javascriptjquery
Patel
Patel

Reputation: 11

CSS Using to Make Many backgrounds Move at speeds that are different by mouse

Hi i want to create an affect where background move to the mouse at different speeds to make an affect almost like 3d.

This is what i want to make that with which i have found found this

can someone explained to me or show me some script that will do this please.

Upvotes: 1

Views: 1064

Answers (2)

LoveAndCoding
LoveAndCoding

Reputation: 7947

What you're talking about is a parallax effect. There are many existing scripts and plugins that allow you to do this. For example, a simple search prompted this page which lists 7 different jQuery plugins.

The basic premise is dividing up the pieces into layers that are moved via JS independently based on the current position of the mouse, and then hiding the areas different areas if needed.

Example

A simple example of this effect might be the following (please don't ever use this code, it is not very clean):

HTML

<div id="parallax">
    <img src="img1.png" alt="background"/>
    <img src="img2.png" alt="foreground"/>
</div>

JS

$('#parallax').on('mousemove', function (e) {
    $('img').eq(0).css('left', e.pageX);
    $('img').eq(1).css('left', e.pageX * 2);
});

In this simple example, the foreground image will move twice as fast as the background. As you can see, you simply move each piece separately from one another to get the desired effect.

Upvotes: 1

verdesmarald
verdesmarald

Reputation: 11866

Why didn't you just look at the js in the source of that page. Its 4 images that are absolutely positioned in a mouse move event.

 $(document).mousemove(function(e) {
    var x = ((e.pageX/$(window).width())*100)*-1;
    var y = ((e.pageY/$(window).height())*100)*-1;
    var pos = (x/80*-1)+"% "+(y/80*-1)+"%";
    var pos2 = (x/3+60)+"% "+(y/3+60)+"%";
    var pos3 = (x/5+30)+"% "+(y/5+30)+"%";
    var pos4 = (x/2+60)+"% "+(y/2+60)+"%";
    $("#grid").css("background-position",pos);
    $("#bottom").css("background-position",pos2);
    $("#bottomoverlay").css("background-position",pos3);
    $("#bottomblur").css("background-position",pos4); });

Upvotes: 0

Related Questions