视觉差网站(一)
一.前言
看了好多视觉差的网站,觉得都不错,总结了一下
大致有两类:
- 一类是鼠标移动-元素随鼠标移动;
- 另一类是鼠标移动向下滑制造页面背景视觉差;
二. 鼠标移动视觉差
就是鼠标移动,使元素(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/
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!
