parallax with 1 image
Question
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
5 answers
solution1
3 2011-02-08 06:54:57
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>
solution2
2 2011-06-29 17:11:56
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.
solution3
0 2011-02-08 06:11:31
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.
solution4
0 2011-02-21 13:28:53
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...
solution5
0 2011-03-23 16:51:05
A small link is always better than a long discussion ;)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.