視差與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

回答

相關問題