zoukankan      html  css  js  c++  java
  • css实现视觉差的滚动

      之前在逛知乎的时候,发现知乎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的话,那么视觉效果就会越来越远,图片的移动就会越来越不明显。 这样就可以模拟不同的需求。

  • 相关阅读:
    IE 兼容问题笔记
    php编码与解码
    php 一些神奇加有趣的函数
    RESTful 规范
    关于CSS3背景渐变色无效问题
    ECShop
    php中的PHP_EOL换行符
    用 openSSL 生成 公钥 私钥
    app调用支付宝支付 笔记
    utf8 文件 错误保存为gbk 中文乱码 解决方法
  • 原文地址:https://www.cnblogs.com/wjyz/p/10231879.html
Copyright © 2011-2022 走看看