CSS视差滚动效果
一、惊艳Demo先体验
你是否曾听说过视差滚动效果?通常,这一效果大多通过JS实现,也有对应的插件如Parallax.js。但实际上,如果你对兼容性要求不高,比如可以忽略IE浏览器,那么只需简单的几行CSS代码,就能实现视差滚动效果。让我们先来感受一下这个神奇的效果(适用于IE9及以上版本)。进入Demo,滚动滚动条,最好鼠标慢慢拖动,你会发现表情花朵等小图标在手机图片上方飞动的视差感觉。目前,Chrome以及FireFox等浏览器(不包括IE11在内的浏览器)都能完美呈现这一效果。
二、深入CSS实现原理
原理其实非常简单,关键在于几个关键的CSS声明(红色高亮部分)。具体来看,代码片段如下:
1. .container { / 滚动容器 / perspective: 1px; padding: 0; height: calc(100vh - 300px); overflow: auto; }
2. .box { / 视差元素的父级需要3D视角 / height: 1280px; transform-style: preserve-3d; position: relative; }
3. .background { / 滚动比较慢的背景元素 / position: absolute; left: 50%; transform: translate3D(-50%, -120px, -1px) scale(2); }
其中的红色高亮代码出现了perspective的1px,translate3D中的-1px以及scale(2)。这些数字之间有何关系呢?我们可以参考一个狼蚁网站SEO优化的3D视角示意图来解释。当我们从屏幕前方看后方时,由于近大远小的视觉原理,我们看到的内容大小会发生变化。通过CSS的scale函数将内容放大到原来的两倍,正好使得在平面上看起来大小合适。虽然在实际的三维空间中,物体的大小和位置发生了改变,但在滚动时,位移变化仍然保持一定比例。举个简单的例子,坐在快速行驶的车上看远处的景物,虽然车在动,但景物似乎并未移动,这就是视差体验的一种模拟。网页中的3D效果模拟了真实世界的三维效果,因此也能带来这种独特的视差体验。
让我们一同这个充满魅力的世界,用简单的CSS代码感受视差滚动的奇妙效果。更多精彩内容,期待你的发现与学习!
网站源码
- CSS视差滚动效果
- 教你玩转微信5.3:面对面可通过暗号迅速建群
- 查找linux入侵证据的简单几个小技巧
- 怎么打开隐藏文件 打开隐藏文件的方法
- CSS 实现网页图片的预加载
- 笔记本怎么改触摸屏?普通笔记本电脑改触摸屏
- Ai设计绘制雪景卡通壁纸
- 加速乐:DNS行业需要给用户更多选择
- ai怎么设计一款滑板产品-
- ai怎么画扁平化的电钻图标- ai电钻的画法
- 为什么百度手机搜索和电脑搜索排名不一样
- Ai怎么绘制可以翻页的日历图标-
- 新款华为MateBook X Pro评测
- neoCapture.exe - neoCapture是什么进程 有什么用
- Win10 消费者预览版开启管理员账号权限的技巧
- win10安装office提示:错误1907无法注册字体的解决