时间:2021-05-08
一、效果Demo先行~
视差滚动效果大家可能都听过,基本上都是JS实现的,有对应插件 - Parallax.js .
实际上,如果你对兼容性要求不是很高,比方说忽略IE浏览器,则我们使用简单的几行CSS代码就可以实现视差滚动效果了。
对于效果展示,先看效果是最能引起兴趣,激发学习热情的,如下(IE9+):
进入Demo滚动滚动条,最好鼠标慢慢拖动,效果更明显——表情花朵等小图标在手机图片上方飞动的视差感觉。目前,Chrome以及FireFox等浏览器(不包括IE11在内的浏览器)都是有效果。
二、CSS实现的原理
原理说透了很简单,下面几个关键CSS声明起的作用(红色高亮部分):
复制代码代码如下:
.container {
perspective: 1px;
padding: 0; height: calc(100vh - 300px); overflow: auto;
}
.box {
height: 1280px;
transform-style: preserve-3d;
position: relative;
}
.background {
position: absolute; left: 50%;
transform: translate3D(-50%, -120px, -1px) scale(2);
}
大家可以注意上面红色高亮代码出现了一个1px(来自perspective), 一个-1px(来自transform)以及scale(2)中的2. 这几个数字之间有什么关系呢?
我们先看下面这个3D视角示意图(来自 这里 ):
当我们在屏幕前面1个单位的地方,看屏幕后面1个单位的元素,肉眼所见的画面大小只有实际的1/2,即所谓的近大远小。此时scale(2)让内容放大到原来2倍,正好在平面上看上去好像是原来大小。
虽然肉眼所见体积似乎是1:1,但是,滚动时候的位移变化还是1:2, 应该很好理解。举个极端的例子,我们坐在电瓶车上看天上的月亮,虽然车子在40码的速度奔啊奔,但是,好像月亮的位置没有移动,一直就在头顶。网页中的3D就是模拟真实世界的3D效果,因此,也会有这种视差体验。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
视差滚动在图片滑块中的应用。在当前的网页设计中,视差滚动(ParallaxScrolling)的使用频率依然算是相当之高了,通过运用这种技术,原本静态的网页就会
滚动视差效果的实现原理是在同一个页面上将页面元素分为多层,例如可以分为背景、内容、贴图层,在滚动页面的时候让三者滚动的速度不一,从而在人的视觉上能够形成一种立体
div+css+javascript实现无缝滚动,marquee无缝滚动,无缝滚动,兼容firefox用marquee实现首尾相连循环滚动效果(仅IE):复制代
一、视差:让单纯的滚动变成互动如果改变网站某一方面的设计能让用户与网站之间的参与度提高7成,那么你会不会使用?实际上,很多网站已经开始这样做了,这就是视差滚动给
背景方面的趋势,在页面中是让多层背景以不同的速度移动,形成运动视差效果,纯属视觉效果,但在内容滚动时形成的视觉体验相当精彩。页面设计趋势就是要创造这样的视觉效果