web前端经典教程之鼠标感应

      通常网页设计的非常好看，尤其是电商和游戏，但是浏览网页如果只是相当于在美图看看里看图片，那再好看的设计也就只是设计而已的。加不了链接就不能为销售服务，没有多少交互吸引客户的注意力，客户也不会停留多久。客户就好像我们的女朋友一样，需要跟她来点互动，时不时推、拉一番，撩得她不要不要的，她才会对你欲罢不能。网页当中也是这样，得有一些推、拉共振或者说交互在里面，让你感受到我们心意是相通的，才会长久。

《多元单向移动篇》

1. 多元，指的是多个元素；单向，指的是沿某个方向移动，如下图所示，只在X轴方向上移动。各个元素移动的尺度可以分别设置，具体的值由“data-x”控制。

2. 切出来的图片如下所示并于下面代码中的名称一一对应。

3. Html结构如下所示，非常规整，相信对设计师来说不难理解。名字可以随便取，很多也只需要复制稍微改动下，但是很奇怪设计师为什么把那么难练的手绘都搞得定，却不懂这么点结构，其实不是因为难，而是没有合适的人去引导。

《单元多唯移动篇》

1. 截的图元素距离比较大，然后因为体积的关系又不好设很多帧，所以下面的gif动图看起来太夸张了，在实际的网页中，运动是非常细腻的，元素能够同时在X轴和Y轴方向移动。单元指的是只有一个元素可以移动。

2. 切出来的素材图片如下所示。只有"able.png"能够动，其他的切出来主要是为了形成设计上的覆盖，看起来会更有层次一些。

3. css层叠样式和html结构如下所示。看上去是不是很轻松呢？“bg.jpg”作为banner这个盒子的背景，剩下的三张图分别定位一下，布局就出来了。

《多元多唯篇》

1. 站酷十周年的这个特效则是多个元素可以在X轴和Y轴上同时移动，主要借助js的一个视觉差特效引擎插件，找到我们要进行视觉差效果的Dom元素，并且把这个Dom元素作为参数传入到Parallax这个构造函数中，以创建一个新的parallax对象。

2. 素材图片如下所示，想要某个元素在图层当中的次序，可以设置定位中的z-index值。

3. html结构如下所示。如果你想控制各个元素的运动幅度，可以修改各个层对应的“data-depth”，下方视频教程中我就都设置同样的幅度了。

附上高清实操视频

看了之后你就知道怎么实现站酷十周年的那个效果了

听了觉得有收获的才点赞👍。