做旅游网站的写手,外卖小程序源码,5个不好的网站,品牌建设及龙头企业何为滚动视差
视差滚动#xff08;Parallax Scrolling#xff09;是指让多层背景以不同的速度移动#xff0c;形成立体的运动效果#xff0c;带来非常出色的视觉体验。 作为网页设计的热点趋势#xff0c;越来越多的网站应用了这项技术。 通常而言#xff0c;滚动视差在…何为滚动视差
视差滚动Parallax Scrolling是指让多层背景以不同的速度移动形成立体的运动效果带来非常出色的视觉体验。 作为网页设计的热点趋势越来越多的网站应用了这项技术。 通常而言滚动视差在前端需要辅助 Javascript 才能实现。当然其实 CSS 在实现滚动视差效果方面也有着不俗的能力。下面就让我们来见识一二 认识 background-attachment background-attachment 算是一个比较生僻的属性基本上平时写业务样式都用不到这个属性。但是它本身很有意思。background-attachment如果指定了
background-image 那么
background-attachment 决定背景是在视口中固定的还是随着包含它的区块滚动的。单单从定义上有点难以理解随下面几个 Demo 了解下
background-attachment 到底是什么意思background-attachment: scroll
scroll 此关键字表示背景相对于元素本身固定 而不是随着它的内容滚动。
background-attachment: local
local 此关键字表示背景相对于元素的内容固定。如果一个元素拥有滚动机制背景将会随着元素的内容滚动 并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。
background-attachment: fixed
fixed 此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制背景也不会随着元素的内容滚动。 注意一下 scroll 与 fixed一个是相对元素本身固定一个是相对视口固定有点类似 position 定位的 absolute 和 fixed。 可以感受下 3 种不同取值的不同效果 titlebg-attachment Demo srchttps://codepen.io/Chokcoco/embed/xJJorg/?height265theme-id0default-tabhtml,resultembed-version2 frameborderno scrollingno width320 height265
CodePen Demo -- bg-attachment Demo 使用 background-attachment: fixed 实现滚动视差
首先我们使用
background-attachment: fixed 来实现滚动视差。fixed 此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制背景也不会随着元素的内容滚动。这里的关键在于即使一个元素拥有滚动机制背景也不会随着元素的内容滚动。也就是说背景图从一开始就已经被固定死在初始所在的位置。
我们使用图文混合排布的方式实现滚动视差HTML 结构如下
.g-word 表示内容结构
.g-img 表示背景图片结构section classg-wordHeader/section
section classg-imgIMG1/section
section classg-wordContent1/section
section classg-imgIMG2/section
section classg-wordContent2/section
section classg-imgIMG3/section
section classg-wordFooter/section 关键 CSS section {
height: 100vh;
}
.g-img {
background-image: url(...);
background-attachment: fixed;
background-size: cover;
background-position: center center;
} 效果如下 titlebg-attachment:fixed parallax srchttps://codepen.io/Chokcoco/embed/JBaQoY/?height265theme-id0default-tabcss,resultembed-version2 frameborderno scrollingno width320 height265
CodePen Demo -- https://codepen.io/Chokcoco/pen/JBaQoY
嗯有点神奇为什么会是这样呢可能很多人会和我一样第一次接触这个属性对这样的效果感到懵逼。
我们把上面
background-attachment: fixed 注释掉或者改为
background-attachment: local再看看效果titlebg-attachment:local srchttps://codepen.io/Chokcoco/embed/ZjMdJz/?height265theme-id0default-tabcss,resultembed-version2 frameborderno scrollingno width320 height265
CodePen Demo -- bg-attachment:local
这次图片正常跟随滚动条滚动了按常理这种效果才符合我们大脑的思维。
而滚动视差效果正是不按常理出牌的一个效果重点来了
当页面滚动到图片应该出现的位置被设置了
background-attachment: fixed 的图片并不会继续跟随页面的滚动而跟随上下移动而是相对于视口固定死了。好我们再来试一下如果把所有
.g-word 内容区块都去掉只剩下全部设置了
background-attachment: fixed 的背景图区块会是怎么样呢HTML 代码如下 section classg-imgIMG1/section
section classg-imgIMG2/section
section classg-imgIMG3/section section {
height: 100vh;
}
.g-img {
background-image: url(...);
background-attachment: fixed;
background-size: cover;
background-position: center center;
} 效果如下 CodePen Demo
结合这张 GIF相信能对
background-attachment: fixed 有个更深刻的认识移动的只有视口而背景图是一直固定死的。综上就是 CSS 使用
background-attachment: fixed 实现滚动视差的一种方式也是相对而言比较容易的一种。当然
background-attachment: fixed 本身的效果并不仅只是能有用来实现滚动视差效果合理运用还可以实现其他很多有趣的效果这里简单再列一个background-attachment: fixed 实现图片点击水纹效果
利用图片相对视口固定可以有很多有趣的效果譬如下面这个来源于这篇文章CSS Water Wave (水波效果) titlebg-attachment:fixed Wave srchttps://codepen.io/Chokcoco/embed/wxYZWO/?height265theme-id0default-tabcss,resultembed-version2 frameborderno scrollingno width320 height265
CodePen Demo -- bg-attachment:fixed Wave
利用图片相对视口固定的特性实现点击的水纹效果。 上面这个效果有点瑕疵图片在放大容器变大的过程中发生了明显的抖动。当然效果还是可以的background-attachment 还有很多有意思的效果可以挖掘。 使用 transform: translate3d 实现滚动视差
言归正传下面介绍另外一种使用 CSS 实现的滚动视差效果利用的是 CSS 3D。
原理就是 我们给容器设置上 transform-style: preserve-3d 和 perspective: xpx那么处于这个容器的子元素就将位于3D空间中 再给子元素设置不同的 transform: translateZ()这个时候不同元素在 3D Z轴方向距离屏幕我们的眼睛的距离也就不一样 滚动滚动条由于子元素设置了不同的 transform: translateZ()那么他们滚动的上下距离 translateY 相对屏幕我们的眼睛也是不一样的这就达到了滚动视差的效果。 关于 transform-style: preserve-3d 以及 perspective 本文不做过多篇幅展开默认读者都有所了解还不是特别清楚的可以先了解下 CSS 3D。 核心代码表示就是 div classg-container
div classsection-onetranslateZ(-1)/div
div classsection-twotranslateZ(-2)/div
div classsection-threetranslateZ(-3)/div
/div html {
height: 100%;
overflow: hidden;
}
body {
perspective: 1px;
transform-style: preserve-3d;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
.g-container {
height: 150%;
.section-one {
transform: translateZ(-1px);
}
.section-two {
transform: translateZ(-2px);
}
.section-three {
transform: translateZ(-3px);
}
} 总结就是父元素设置
transform-style: preserve-3d 和
perspective: 1px子元素设置不同的
transform: translateZ滚动滚动条效果如下CodePen Demo -- CSS 3D parallax
很明显当滚动滚动条时不同子元素的位移程度从视觉上看是不一样的也就达到了所谓的滚动视差效果。
滚动视差文字阴影/虚影效果
那么运用 translate3d 的视差效果又能有一些什么好玩的效果呢下面这个滚动视差文字阴影/虚影效果很有意思 titleCSS translate3d Parallax srchttps://codepen.io/Chokcoco/embed/XBgBBp/?height265theme-id0default-tabcss,resultembed-version2 frameborderno scrollingno width320 height265
CodePen Demo -- CSS translate3d Parallax
当然通过调整参数
perspective: ?px 以及
transform: translateZ(-?px);还能有其他很有意思的效果出现titlePBXwdX srchttps://codepen.io/Chokcoco/embed/PBXwdX/?height265theme-id0default-tabcss,resultembed-version2 frameborderno scrollingno width320 height265
CodePen Demo -- CSS translate3d Parallax 2
是不是很有电影开片的厂商 LOGO 的特效的感觉 。
师父领进门修行在个人怎么制作更好更有意思的效果还是需要花时间钻研和琢磨这里我仅仅是抛砖引玉希望能见到更多 Nice 的效果。 最后
感谢耐心读完。更多精彩 CSS 技术文章汇总在我的 Github -- iCSS 持续更新欢迎点个 star 订阅收藏。
好了本文到此结束希望对你有帮助 :)
如果还有什么疑问或者建议可以多多交流原创文章文笔有限才疏学浅文中若有不正之处万望告知。 本文转载于:猿2048☞https://www.mk2048.com/blog/blog.php?idiakj2abtitle滚动视差CSS 不在话下
