如何使对称图像相互滚动？

Question

这很难解释，所以请查看http://www.adhamdannaway.com。

我想为我的在线作品集创建一个类似的前端，但我找不到任何关于如何使用它的信息。会是jquery还是css？

此处显示了类似的系统：http://www.indigorenderer.com/sketchup/

查看代码时，html大小会随着您在图像上移动而改变。 我认为它与视差滚动有关。

请有人请说明情况并指出正确的方向吗？

感谢。

Answer 1

嗯，第二个链接有两个图像，一个是黑色和白色，另一个是彩色的。然后使用css位置将两个图像一个放在另一个上面（现在显示一个图像）。然后使用jquery你可以对图像进行onhover事件 - 改变另一个图像的宽度并仅显示块并增加宽度作为悬停

Answer 2

效果为parallax。这个example显示了您可能想要的效果。注意红色图层如何跟随光标并且背景图像保持不变。您需要将背景设置为一个图像，将“红色”图层设置为第二个图像。您还需要将“红色”图层设置为仅在x方向上移动。