视觉差网站（一）

一.前言

  看了好多视觉差的网站，觉得都不错，总结了一下

  大致有两类：

• 一类是鼠标移动-元素随鼠标移动；
• 另一类是鼠标移动向下滑制造页面背景视觉差；

二. 鼠标移动视觉差

    就是鼠标移动，使元素（img/svg）也移动（按比例）;

• demo1:https://codepen.io/jeft-hai/pen/eLeqqL;

                

         随着鼠标的移动,背后的circle/square/close 都会移动；

         做了兼容性处理:

              ie9以上/chrome等 使用transform;

              ie9及以下不支持transform;变换元素的margin-left/margin-top;

• demo2:http://www.egopop.net

       这也是一个用margin处理的网站,所以兼容性非常好。

• demo3:http://www.culturalsolutions.co.uk/

      也没有用transform,用的是left&margin;

三. 背景视觉差

• demo1:  http://www.putzengel.at/#moveto_about;
• demo2:  http://www.itosieceni.pl/