CODEWITHSUNDEEP
javascriptjquery
Henson
Henson

Reputation: 5913

parallax with 1 image

I want to use parallax effect with only 1 image. Can it be done?

Actually, it's not really parallax, I have one big image in the center of screen, so when I move my mouse to the left, I want the image slightly moves to the right, move mouse to the right, the image slightly moves to the left, move mouse up image moves down, move mouse down image moves up.

I think I've seen this effect before, but I kinda forget where I see it. Really appreciate help. Thanks

Upvotes: 3

Views: 3328

Answers (5)

slickplaid
slickplaid

Reputation: 1431

Here is the exact plugin that github uses for it's parallax effect:

https://github.com/cameronmcefee/plax

From the documentation:

$('#plax-octocat').plaxify({"xRange":40,"yRange":40});
$('#plax-earth').plaxify({"xRange":20,"yRange":20,"invert":true});
$('#plax-bg').plaxify({"xRange":10,"yRange":10,"invert":true});
$.plax.enable();

Just set the invert:true variables for items behind and set higher values for stuff in front of the focus item and you're set.

Upvotes: 2

Guillaume
Guillaume

Reputation: 705

A small link is always better than a long discussion ;)

Check out github 404 page!

Upvotes: 0

Fenton
Fenton

Reputation: 251152

There are some jQuery plugins that do some of the things you mention.

Image parallax can create a depth-like parallax using a single image or collection of images

http://plugins.jquery.com/project/imageparallax

But I think maybe Background Parallax is what you actually want - so the background moves at a different rate to the scroll, like on Android home screens...

http://plugins.jquery.com/project/backgroundparallax

Upvotes: 0

DhruvPathak
DhruvPathak

Reputation: 43265

Here is how it can be done, you can tweak and improve it. Not tested on all browsers,works good on firefox. Cheers!

See it in action at jsFiddle.

<html>
<head>
<script>
document.onmousemove = shiftImageXY;

var tempX = 0;
var tempY = 0;
var oldTempX = 0;
var oldTempY = 0;
var IE =  !!(window.attachEvent&&!window.opera);

function shiftImageXY(e) {
  if (IE) { 
    tempX = event.clientX + document.body.scrollLeft;
    tempY = event.clientY + document.body.scrollTop;
  } else {  
    tempX = e.pageX;
    tempY = e.pageY;
  }  
  img = document.getElementById('myImage');
  speedFactorDamping = 0.1; // change this for faster movement
  xdir = (tempX - oldTempX) ;
  ydir = (tempY - oldTempY) ;
  parallexX = -xdir*speedFactorDamping;
  parallexY = -ydir*speedFactorDamping;
  currX = parseInt(img.offsetLeft);
  currY = parseInt(img.offsetTop);

  img.style.left = (currX + parallexX) + 'px';
  img.style.top = (currY + parallexY) + 'px';
  oldTempX = tempX;
  oldTempY = tempY;
  return true;
}

</script>

</head>
<body>
<div style='height:300px;clear:both;text-align:center;'></div>
<div style='height:800px;width:800px;text-align:center;'>
<img id='myImage' src='http://img516.imageshack.us/img516/7355/icon.png' style='position:absolute' />
</div>

</body>

Upvotes: 3

blue01
blue01

Reputation: 2095

I hope you mean an effect like this - bouncing orbs

If yes, you can do it using one image only. You draw it such that, If your image is like

----------
|image   |
|--------|


then you draw it in two parts

-------
age   |im
------|
      ^
      |

      this being the start of the second draw.

This would give you the parallax effect.

Coding it should be easy, just changing the reference point of drawing rectangles of a image using a modulus of width.

Upvotes: 0

Related Questions