javascript - 鼠标悬停时CSS背景图像移动

Question

我想在我的网页中有一个具有背景图像的元素，当鼠标悬停在其上时，背景图像将随着鼠标的移动而移动，如本网站所示:

http://www.kennedyandoswald.com/#!/premiere-screen

我有这个 HTML 代码:

<section id="home" data-speed="3" data-type="background"></section>

我可以使用“data-speed =”3”来控制背景图像滚动的速度，但我想知道是否有任何类似于“data-speed”的代码可以使用鼠标移动来移动背景图像背景图像而不是滚动。

Answer 1

有很多JS库可以帮助你实现这种效果。我个人经常使用这个:http://wagerfield.github.io/parallax/

这非常容易使用，但要达到相同的效果可能需要一些尝试和错误。但这是值得的!

另一个不像上面那么复杂但功能强大的是:http://stephband.info/jparallax/

您可以尝试两者，看看哪一个最适合您的使用。