之前在逛知乎的时候,发现知乎app首页中偶尔掺杂的广告图片,都是做的视觉差的效果,广告图片的向上速度明显比外面页面的上拉速度慢了很多,看起来很炫酷,然后在网上看了下,发现有很多js插件可以实现这种效果。这种就不提了,这次我们是考虑的用css写。(当然,ie是不兼容的)

  这边参考了张鑫旭大神的一篇文章。  视觉差-张鑫旭

  这边是我参考之后做的demo:   demo

  主要的代码就是

    外层容器: perspective: 1px;     定义3d元素离视图的距离

    中间元素: transform-style: preserve-3d;    定义3d空间。

    需要视觉差的元素:  transform: translateZ(-1px ) scale(2)

  这里面大体的原理就是:  因为定义了视图距离为1px,那么translateZ -1px的话,我们肉眼看这个图片就只有之前的一半大小,这个时候scale(2)的话,就放大了2倍,视觉上就和原来的一样大小,但是滚动的时候,位移的变化还是1:2,这样就形成了视觉差。

  如果更改translateZ的话,那么视觉效果就会越来越远,图片的移动就会越来越不明显。 这样就可以模拟不同的需求。

css实现视觉差的滚动的更多相关文章

  1. 原生JS和JQuery代码编写窗口捕捉函数和页面视觉差效果(scroll()、offsetTop、滚动监听的妙用)

    想实现窗口滚动到一定位置时,部分网页的页面发生一些变化,但是手头没有合适的插件,所以就想到自己编写一个简易的方法, 想到这个方法要有很高的自由度和适应性,在这,就尽量的削减其功能,若有错误的地方或者更 ...

  2. MG--滚动的视觉差效果

    #几句代码完成tableView滚动的视觉差 - 效果图 (失帧严重)![](http://upload-images.jianshu.io/upload_images/1429890-f2c8577 ...

  3. html+css+javascript实现列表循环滚动示例代码

    使用html+css+javascript实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下 说明:设置时间定时,在规定的时间内替换前一个节点的内 ...

  4. 纯css使用线性渐变实现滚动进度条(来自于微信前端早读课)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 你所不知道的 CSS 阴影技巧与细节 滚动视差?CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例

    你所不知道的 CSS 阴影技巧与细节   关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow  ...

  6. css设置背景固定不滚动效果的示例

    css设置背景固定不滚动效果的示例 背景固定不滚动各位看到最多的无非就是QQ空间了,我们在很多的空间都可以看到内容滚动而北京图片不滚动了,下文整理了几个关于背景固定不滚动css代码. 一.css设置背 ...

  7. 原生视觉差滚动---js+css;

    <!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. css的一些小技巧!页面视觉差!

    相当长的一段时间,现在网站与所谓的“视差”效果一直很受欢迎. 万一你没有听说过这种效果,不同的图像,在不同的方向移动或层主要包括.这导致了一个很好的光学效应,使参观者的注意. 在网页设计中,为了实现这 ...

  9. 3D视觉差---原生js+css

    <!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. hibernate的hibernate.cfg.properties

    1.hibernate.cfg.properties  配置文件要放在工程目录src下,编译的时候会自动放在/bin目录下 ,所以Configuration configuration=new Con ...

  2. IDEA设置与快捷键记录

    一:代码提示大小写设置 二:设置代码检查等级 IntelliJ IDEA 对于编辑大文件并没有太大优势,很卡,原因就是它有各种检查,这样是非常耗内存和 CPU 的,所以为了能加快大文件的读写,我一般会 ...

  3. Alpha冲刺(八)

    Information: 队名:彳艮彳亍团队 组长博客:戳我进入 作业博客:班级博客本次作业的链接 Details: 组员1(组长)柯奇豪 过去两天完成了哪些任务 进一步优化代码,结合自己负责的部分修 ...

  4. 团体程序设计天梯赛L2-002 链表去重 2017-03-22 18:12 25人阅读 评论(0) 收藏

    L2-002. 链表去重 时间限制 300 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 给定一个带整数键值的单链表L,本题要求你编写程序,删除 ...

  5. BZOJ 1878 hh的项链(简单莫队)

    Description HH有一串由各种漂亮的贝壳组成的项链.HH相信不同的贝壳会带来好运,所以每次散步 完后,他都会随意取出一 段贝壳,思考它们所表达的含义.HH不断地收集新的贝壳,因此他的项链变得 ...

  6. python3操作Excel openpyxl模块的使用

    python 与excel 安装模块 本例子中使用的模块为: openpyxl 版本为2.4.8 安装方法请参看以前发表的文章(Python 的pip模块安装方法) Python处理Excel表格 使 ...

  7. Spring.NET 整合Nhibernate

    因为最近无意中学了AOP ,所以想一探究竟,看看.net里这个Spring.Net 到底是怎么回事,请有需要的童鞋往下,不需要的请alt+w.因为是先配置的 Nhibernate 所以就从这个开始.开 ...

  8. asp.net——地址栏传递中文参数乱码解决方案

    地址栏传递中文参数乱码解决方案: 很多人在使用地址栏传递参数的时候都会遇到一个麻烦的问题(参数为中文时乱码了),那要怎么解决呢? 其实解决这个问题也不怎么难,无非就是给要传递的中文参数一个编码解码的过 ...

  9. 对路径“c:\windows\system32\inetsrv\syslog”的访问被拒绝。

    win7 64 系统,在调试wcf的时候,出了这个错误,当时感觉iis的权限不够,iis搞了好长时间没解决.最后改了用到的应用程序池中的标识.标识改成 localSytem,之后问题解决. IIS-- ...

  10. 【海量干货】89页PPT详解微信O2O行业解决方案

    根据腾讯大讲堂提供的信息,整理成了PPT,下载地址: http://yunpan.cn/cZAbTnJXnMymd  访问密码 f36d