滚动视差?CSS 不在话下

何为滚动视差

视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。 作为网页设计的热点趋势,越来越多的网站应用了这项技术。

parallax

通常而言,滚动视差在前端需要辅助 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 种不同取值的不同效果:

title="bg-attachment Demo" src="https://codepen.io/Chokcoco/embed/xJJorg/?height=265&theme-id=0&default-tab=html,result&embed-version=2" frameborder="no" scrolling="no" width="320" height="265">

CodePen Demo -- bg-attachment Demo

 

使用 
background-attachment: fixed
 实现滚动视差

首先,我们使用 

background-attachment: fixed
 来实现滚动视差。fixed 此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制,背景也不会随着元素的内容滚动。

这里的关键在于,即使一个元素拥有滚动机制,背景也不会随着元素的内容滚动。也就是说,背景图从一开始就已经被固定死在初始所在的位置。

我们使用,图文混合排布的方式,实现滚动视差,HTML 结构如下,

.g-word
 表示内容结构,
.g-img
 表示背景图片结构:

<section class="g-word">Header</section>
<section class="g-img">IMG1</section>
<section class="g-word">Content1</section>
<section class="g-img">IMG2</section>
<section class="g-word">Content2</section>
<section class="g-img">IMG3</section>
<section class="g-word">Footer</section>

关键 CSS:

section {
height: 100vh;
}
.g-img {
background-image: url(...);
background-attachment: fixed;
background-size: cover;
background-position: center center;
}

效果如下:

parallax background-attachment: fixed

title="bg-attachment:fixed parallax" src="https://codepen.io/Chokcoco/embed/JBaQoY/?height=265&theme-id=0&default-tab=css,result&embed-version=2" frameborder="no" scrolling="no" width="320" height="265">

CodePen Demo -- https://codepen.io/Chokcoco/pen/JBaQoY

嗯?有点神奇,为什么会是这样呢?可能很多人会和我一样,第一次接触这个属性对这样的效果感到懵逼。

我们把上面 

background-attachment: fixed
 注释掉,或者改为 
background-attachment: local
,再看看效果:

parallax background-attachment: fixed 2

title="bg-attachment:local " src="https://codepen.io/Chokcoco/embed/ZjMdJz/?height=265&theme-id=0&default-tab=css,result&embed-version=2" frameborder="no" scrolling="no" width="320" height="265">

CodePen Demo -- bg-attachment:local

这次,图片正常跟随滚动条滚动了,按常理,这种效果才符合我们大脑的思维。

而滚动视差效果,正是不按常理出牌的一个效果,重点来了:

当页面滚动到图片应该出现的位置,被设置了 

background-attachment: fixed
 的图片并不会继续跟随页面的滚动而跟随上下移动,而是相对于视口固定死了。

好,我们再来试一下,如果把所有 

.g-word
 内容区块都去掉,只剩下全部设置了 
background-attachment: fixed
 的背景图区块,会是怎么样呢?

HTML 代码如下:

<section class="g-img">IMG1</section>
<section class="g-img">IMG2</section>
<section class="g-img">IMG3</section>
section {
height: 100vh;
}
.g-img {
background-image: url(...);
background-attachment: fixed;
background-size: cover;
background-position: center center;
}

效果如下:

parallax background-attachment: fixed 3

CodePen Demo

结合这张 GIF,相信能对 

background-attachment: fixed
 有个更深刻的认识,移动的只有视口,而背景图是一直固定死的。

综上,就是 CSS 使用 

background-attachment: fixed
 实现滚动视差的一种方式,也是相对而言比较容易的一种。当然,
background-attachment: fixed
 本身的效果并不仅只是能有用来实现滚动视差效果,合理运用,还可以实现其他很多有趣的效果,这里简单再列一个:

 

background-attachment: fixed
 实现图片点击水纹效果

利用图片相对视口固定,可以有很多有趣的效果,譬如下面这个,来源于这篇文章CSS Water Wave (水波效果):

background-attachment: fixed Wave

title="bg-attachment:fixed Wave" src="https://codepen.io/Chokcoco/embed/wxYZWO/?height=265&theme-id=0&default-tab=css,result&embed-version=2" frameborder="no" scrolling="no" width="320" height="265">

CodePen Demo -- bg-attachment:fixed Wave

利用图片相对视口固定的特性实现点击的水纹效果。

上面这个效果有点瑕疵,图片在放大容器变大的过程中发生了明显的抖动。当然,效果还是可以的,

background-attachment
 还有很多有意思的效果可以挖掘。

 

使用 
transform: translate3d
 实现滚动视差

言归正传,下面介绍另外一种使用 CSS 实现的滚动视差效果,利用的是 CSS 3D。

原理就是:

  1. 我们给容器设置上 

    transform-style: preserve-3d
     和 
    perspective: xpx
    ,那么处于这个容器的子元素就将位于3D空间中,

  2. 再给子元素设置不同的 

    transform: translateZ()
    ,这个时候,不同元素在 3D Z轴方向距离屏幕(我们的眼睛)的距离也就不一样

  3. 滚动滚动条,由于子元素设置了不同的 

    transform: translateZ()
    ,那么他们滚动的上下距离 
    translateY
     相对屏幕(我们的眼睛),也是不一样的,这就达到了滚动视差的效果。

关于 

transform-style: preserve-3d
 以及 
perspective
 本文不做过多篇幅展开,默认读者都有所了解,还不是特别清楚的,可以先了解下 CSS 3D。

核心代码表示就是:

<div class="g-container">
<div class="section-one">translateZ(-1)</div>
<div class="section-two">translateZ(-2)</div>
<div class="section-three">translateZ(-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
,滚动滚动条,效果如下:

css3dparallax

CodePen Demo -- CSS 3D parallax

很明显,当滚动滚动条时,不同子元素的位移程度从视觉上看是不一样的,也就达到了所谓的滚动视差效果。

滚动视差文字阴影/虚影效果

那么,运用 translate3d 的视差效果,又能有一些什么好玩的效果呢?下面这个滚动视差文字阴影/虚影效果很有意思:

csstparallax

title="CSS translate3d Parallax" src="https://codepen.io/Chokcoco/embed/XBgBBp/?height=265&theme-id=0&default-tab=css,result&embed-version=2" frameborder="no" scrolling="no" width="320" height="265">

CodePen Demo -- CSS translate3d Parallax

当然,通过调整参数(

perspective: ?px
 以及 
transform: translateZ(-?px);
),还能有其他很有意思的效果出现:

csstparallax2

title="PBXwdX" src="https://codepen.io/Chokcoco/embed/PBXwdX/?height=265&theme-id=0&default-tab=css,result&embed-version=2" frameborder="no" scrolling="no" width="320" height="265">

CodePen Demo -- CSS translate3d Parallax 2

是不是很有电影开片的厂商 LOGO 的特效的感觉 joy 。

师父领进门,修行在个人,怎么制作更好更有意思的效果还是需要花时间钻研和琢磨,这里我仅仅是抛砖引玉,希望能见到更多 Nice 的效果。

 

最后

感谢耐心读完。更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。

好了,本文到此结束,希望对你有帮助 :)

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

 

 

本文转载于:猿2048☞https://www.mk2048.com/blog/blog.php?id=iakj2ab&title=滚动视差?CSS 不在话下

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370742.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

番石榴的弦类

在“ 检查Java中的空&#xff0c;空或仅空白字符串”一文中 &#xff0c;我演示了Java生态系统&#xff08;标准Java&#xff0c; Guava &#xff0c; Apache Commons Lang和Groovy &#xff09;中用于检查字符串是否为空&#xff0c;空或空白的常见方法。仅类似于C&#xff03…

用python做数据分析流程图_使用Pyecharts进行高级数据可视化

欢迎使用Markdown编辑器经管之家&#xff1a;Do the best economic and management education&#xff01;你好&#xff01; 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章&#xff0c;了解一下Markdown的基本语…

Hadoop集群的配置(二)

转自&#xff1a;http://www.cnblogs.com/baiboy/p/4640640.html 摘要: hadoop集群配置系列文档&#xff0c;是笔者在实验室真机环境实验后整理而得。以便随后工作所需&#xff0c;做以知识整理&#xff0c;另则与博客园朋友分享实验成果&#xff0c;因为笔者在学习初期&#x…

允许使用抽象类类型 isearchboxinfo 的对象_Java学习5-设计模式+抽象类/方法

1.设计模式设计模式&#xff1a;一套被反复使用、多数人知晓的&#xff0c;经过分类编目的、代码设计经验的总结&#xff0c;是软件开发人员在软件开发过程中面临的一般问题的解决方案。项目中合理的运用设计模式可以完美的解决很多问题&#xff1b; 每种模式在现实中都有相应的…

计算机病毒是以独立的文件形式存在的对吗,计算机病毒以什么形式存在?

自从2113世纪出现第一种病毒以来&#xff0c;对于世界上共有5261种病毒的疾病数量有不同的看法. 无论有1,653种&#xff0c;病毒的数量仍在增加. 根据国外统计&#xff0c;计算机病毒以每周10种的速度增长. 根据我国部的统计&#xff0c;中国计算机病毒以每月4种的速度增长. 有…

签署Java代码

在上一篇文章中&#xff0c;我们讨论了如何保护移动代码 。 提到的措施之一是签名代码。 这篇文章探讨了Java程序如何工作。 数字签名 数字签名的基础是密码学 &#xff0c;特别是公钥密码学 。 我们使用一组加密密钥&#xff1a;私有密钥和公共密钥。 私钥用于签名文件&am…

蜘蛛搜索引擎_SEO:搜索引擎蜘蛛要引导,不能佛系优化

又是一个不眠的夜晚&#xff0c;工作对生活节奏不断地敲打&#xff0c;我们新一代的年轻小伙不得不进步&#xff0c;满怀热情来挑战我们对于工作的激情&#xff0c;虽然每一天工作都是重复地进行&#xff0c;但是每一天都有我们留下的痕迹&#xff0c;为世界的美好增添一道绚丽…

小程序滴滴车主板块的银行卡管理左滑删除编辑

最近在类似于滴滴软件的一款小程序&#xff0c;工程确实有点大&#xff0c;很多东西都是第一次做。这次记录一下关于左滑删除的一个代码记录。主要的思想就是计算滑动距离的大小来使用css中的 transition 控制滑动的效果&#xff0c;主流的都是控制边距margin来达到左滑的效果。…

华菱重卡仪表指示说明_仪表装置11种常见故障的解决方法

1. 转速表工作不正常或停止工作首先检查转速表背面的黑色3孔插头与插座接触是否良好及电压正常与否。3个端子的连接情况&#xff1a;端子a是电源负极&#xff0c;与仪表盘14孔白色插座上的棕色导线连接后搭铁(仪表盘上所有搭铁点均由棕色导线汇集在一起&#xff0c;并通过胶布包…

ASP .NET SVN emmet 插件

学习 ASP .NET 时间的第三周&#xff1a; 来讲讲如何在 visual studio 2013...上搭载 SVN吧: 废话不多说&#xff1a; One Step&#xff1a; 电脑上已安装 visual studio 2013 等版本&#xff08;未安装时 红色区域是不存在的&#xff09; Two Step&#xff1a; 从官网上下载对…

iptables 配置后连接不上数据库_Linux服务器配置-VSFTP服务配置(三)

上文&#xff1a;Linux服务器配置-VSFTP服务配置(二)一、vsftpd服务防火墙配置1、主动(POST)模式 FTP 防火墙配置CentOS6 系统 iptables 的配置iptables -t filter --line-number -nL INPUT#显示现有防火墙规则&#xff0c;查看是否开启20、21号端口。iptables -t filter -I IN…

下标索引必须为正整数类型或逻辑类型_Python3 基本数据类型

Python中的变量不需要声明。每个变量在使用前都必须赋值&#xff0c;变量赋值以后该变量才会被创建。在Python中&#xff0c;变量就是变量&#xff0c;它没有类型&#xff0c;我们所说的"类型"是变量所指的内存中对象的类型。Python 3中有六个标准的数据类型&#xf…

noip模拟赛 写代码

分析&#xff1a;这其实就是括号匹配题&#xff0c;一眼贪心题&#xff0c;不过一开始贪错了&#xff0c;以为([)]是合法的......其实括号之间不能嵌套. 一开始的想法是尽量往左边填左括号&#xff0c;因为每种括号的数量都确定了&#xff0c;那么左括号和右括号的数量也就确定…

行内元素和块元素以及行内块元素的特点

一、背景 初学html&#xff0c;接触很多标签 <h1>、<p>、<span>、<ul>、<em>等&#xff0c;当写出简单的小页面的时候&#xff0c;例如仅仅是一篇带有标题的文章&#xff0c;标题 <h1>标签单独一行&#xff0c;不管后面有多大的空间&…

软件测试的功能测试和性能测试,大型软件的功能测试流程及性能测试流程

大型软件具有涉及子模块繁多、建设过程复杂、功能全面、性能具有较高要求的特点。依据ISO/IEC 9126软件产品评估标准&#xff0c;需要对软件的功能性、可靠性、可用性、效率、可维护性、可移植性等方面进行评估。因此&#xff0c;需要有一种方法能够对大型软件进行测试&#xf…

vue 分模块打包 脚手架_Vue面试官最爱的底层源码问题,你可以这样回答!

最近看到身边很多人都在投简历&#xff0c;有因为企业裁员的&#xff0c;有因为自己想跳槽的&#xff0c;原因不一&#xff0c;但是最终大家都会需要接触到面试这个事情。但是很多人对待面试不够认真&#xff0c;只会等待结果&#xff0c;不去努力。所以这边想整理一些懒人面试…

re.containerbase.startinternal 子容器启动失败_Python项目容器化实践(二) Docker Machine和Docker Swarm...

前言这篇文章介绍Docker生态中的常被提到的Engine、Machine和Swarm&#xff0c;大家以了解为主&#xff0c;工作需要再深入。EngineDocker Engine其实就是我们常说的「Docker」&#xff0c;它是一个C/S模型(Client/Server)的应用&#xff0c;包含如下组件:Daemon。守护进程&…

基于设备树的TQ2440的中断(2)

下面以按键中断为例看看基于设备数的中断的用法&#xff1a; 设备树&#xff1a; tq2440_key {compatible "tq2440,key";interrupt-parent <&gpf>;interrupts <0 IRQ_TYPE_EDGE_FALLING>, <1 IRQ_TYPE_EDGE_FALLING>;key_3 <&gpf 2…

计算机里有个不能进入的磁盘分区,新电脑只有一个分区怎么办? 教你们如何不进pe给硬盘创建新分区!...

很多朋友新电脑刚买回来打开发现明明自己机械硬盘1T或者1T机械加128G固态&#xff0c;但是却只有一个或者两个分区&#xff0c;但是又不会分区现在教大家如何不用老毛桃大白菜之类的进pe系统里面就能直接创建新分区1 WinR输入diskmgmt.msc2进入磁盘管理可以查看本机的C盘与E盘的…

OSGi中的权限

在上一篇文章中 &#xff0c;我们介绍了为Java应用程序实现沙箱的方法&#xff0c;在其中我们可以安全地运行移动代码 。 这篇文章探讨了如何在OSGi环境中执行相同的操作。 OSGi OSGi规范 为Java定义了一个动态模块系统 。 因此&#xff0c;它是实施那种可以使您的应用程序动…