2016-10-10 246 views
0

我想根據鼠標移動實現使用css transform translate3d實現subtil div位置更改的效果。 事情是這樣的網站主頁部分的幾何圖形: http://riccardozanutta.com/根據鼠標移動使用translate3d更改div位置

我嘗試這樣做:

$(window).mousemove(function(event) { 
    $(".home-img").css({"left" : event.pageX, "top" : event.pageY}); 
}); 

單圖像定位絕對和它的工作(圖像根據鼠標移動改變位置),但是當我嘗試動畫3周的div類。基本技能

$(window).mousemove(function(event) { 
    $(".basic-skill").css({"left" : event.pageX, "top" : event.pageY}); 
}); 

外出視口(當它們相對定位),或者它們相互重疊時(當第ey被絕對定位)。

此外,我不知道如何將移動限制爲最大5 px,而不是將它移動到整個視口。

非常感謝您的指導!

+0

你能提供一個小提琴嗎? – K3v1n

回答

1

針對最大5px位移解決您的問題,您可以乘以0.1等因子乘以X和Y座標以減少移動量。像這樣:

$(".basic-skill").css({"left" : event.pageX * 0.1, "top" : event.pageY * 0.1}); 

編輯:而不是使用topleft,您可以使用margin-topmargin-left與CSS靜態topleft值。 JSFiddle

CSS

position: absolute; 
top: 50px; 
left: 50px; 

JS

$("#two").css({"margin-left" : -(event.pageX * 0.1), "margin-top" : -(event.pageY * 0.1)}); 

編輯2:增強小提琴:https://jsfiddle.net/qcoy5xpg/2/

但是,這僅僅是一個快速ñ容易。在您提供的演示頁面中,他使用了SVG元素上的CSS動畫。這就是爲什麼它看起來優雅,如果我可以(緩和)

+0

感謝您的回覆!有沒有可能將運動添加到當前的css位置?我相信您的解決方案將我的元素的位置重置爲默認值; – Aiwatko

+0

@Aiwatko更新了我的答案 – K3v1n