2015-02-06 45 views
-1

由於我對所有的JS東西都很陌生,我想知道團隊頁面如何像塗鴉團隊頁面一樣可以完成。這怎麼辦?嘟嘟團隊頁面

將鼠標光標移動並改變與其位置有關的圖像似乎相當困難。

http://doodle.com/de/ueber-doodle/team

有沒有人對如何甚至開始建立類似的東西什麼想法?

我非常感謝這裏的任何意見。

非常感謝!

+1

這是如何困難?它是一個精靈,根據圖像計算鼠標的X,Y。很基本。 – epascarello 2015-02-06 19:37:44

+1

這不是一個「精靈」,每個持有所有臉部位置的員工都有一個巨大的「背景圖像」,然後根據鼠標的位置動態設置「背景位置」。 – davidkonrad 2015-02-06 19:42:10

+0

所以你的意思是圖像堆疊在另一個? – patrick 2015-02-06 19:44:48

回答

1

不可能有人會給你一個堅實的答案,因爲這個問題太廣泛了。

這裏是一個小提琴演示非常這樣做的基本方式,只使用左右圖像。你可以把它抽象成一個更大的規模來實現他們的目標。

http://jsfiddle.net/xwdeo6u3/

基本上,跟蹤在用戶的鼠標,並調整元件的background-position相應。

The actual image used is this.

Here的一些從他們的網站的源代碼。