视差与1图像

我想使用只有1图像的视差效果。可以做到吗？视差与1图像

实际上，这并不是真正的视差，我在屏幕中心有一个大的图像，所以当我将鼠标移动到左侧时，我想让图像稍微向右移动，将鼠标移动到右侧，图像稍微向左移动，向上移动鼠标图像向下移动，向下移动鼠标图像向上移动。

我想我以前见过这种效果，但我有点忘记我看到它的地方。真的很感谢帮助。由于

2011-02-08 Henson

只是为了一些灵感/参考，github有一个很棒的例子：https://github.com/404 – 2011-02-08 06:34:55

从技术上讲，只有一个二维图像是不可能获得视差的。您可以移动整个图像，如DhruvPathak的答案，但这不是视差。视差需要像github页面那样的多个图像。或者，您可以使用CSS精灵或切片技术将多个部分嵌入到一个图像中。 – 2011-02-08 09:01:15

我希望你的意思的效果像这样 - bouncing orbs

如果是的话，你只能使用一个像它可以做。你画这使得如果你的形象就像

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


then you draw it in two parts 

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

 this being the start of the second draw.

这将使你的视差效果。

编码应该很容易，仅使用宽度模数改变图像的绘制矩形的参考点。

来源

2011-02-08 06:11:31 Harpreet

下面是它是如何做到的，你可以调整和改善它。未在所有浏览器上测试过，在Firefox上效果不错。干杯!

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>

来源

2011-02-08 06:54:57 DhruvPathak

有一些jQuery的插件，做一些你提到的事情。

像视差可以使用图像

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

的单个图像或集合创建深度般的视差，但我想，也许背景视差是你真正想要的东西 - 这样的背景下以不同的速率移动在滚动，就像在Android主屏幕...

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

来源

2011-02-21 13:28:53 Fenton

一个小环节总是比长时间的讨论更好;）

Check out github 404 page!

来源

2011-03-23 16:51:05 Guillaume

这里是github上使用它的确切插件的视差效果：

https://github.com/cameronmcefee/plax

从文档：

$('#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();

只需设置invert:true变量项目背后为焦点项目前面的内容设置更高的值，然后设置。

来源

2011-06-29 17:11:56 slickplaid

视差与1图像

回答

相关问题