纯CSS中的背景显示滚动

最新推荐文章于 2024-08-31 09:27:14 发布

cungui5726

最新推荐文章于 2024-08-31 09:27:14 发布

阅读量361

点赞数

文章标签： css html js python javascript ViewUI

原文链接：https://thenewcode.com/950/Background-Reveal-Scroll-In-Pure-CSS

版权

A popular presentation technique is something I call “background reveal scroll”: as the page is scrolled upwards, images are covered and revealed in the background.

一种流行的演示技术是我所说的“背景显示滚动”：当页面向上滚动时，图像被覆盖并在背景中显示。

While trendy, the technique does have the advantage of concentrating content into a few bold images and short pieces of text. However, the effect is often accomplished by loading a heavy JavaScript framework and a plugin; which, as I’ll show here, are entirely unnecessary in modern browsers.

虽然很流行，但该技术确实具有将内容集中到一些粗体图像和短文本中的优势。但是，效果通常是通过加载沉重JavaScript框架和插件来实现的。正如我将在此处显示的那样，在现代浏览器中完全没有必要。

窗户和阴影 (Windows & Shades)

The basic setup for the effect might be compared to a series of open “windows” and closed “shades” stacked on top of each other, each the exact height and width of the browser viewport.

效果的基本设置可能会与一系列打开的“窗口”和关闭的“阴影”相叠，每个窗口都与浏览器视口的确切高度和宽度相叠。

Let’s start with some basic markup. The windows and shades could be made from almost any HTML container element; I’ll use <section> tags:

让我们从一些基本的标记开始。窗口和阴影几乎可以由任何HTML容器元素制成；我将使用<section>标签：

<section>
	<h1>Come To Iceland</h1>
</section>
<section>
	<h1>The last settled part of Europe, much of Iceland remains pristine and untouched.</h1>
</section>
...

To make each of these elements the right size, I’ll remove any margin from the <body> element, make sure the <section> elements are sized using border-box, and make each the exact height of the current viewport by using vw units. Text will be formatted using the same scalable units:

为了使每个元素的大小正确，我将删除<body>元素的所有margin ，确保使用border-box调整<section>元素的大小，并使用vw将每个视口设置为当前视口的确切高度单位。文本将使用相同的可缩放单位进行格式化：

body { margin: 0; }
section {
	box-sizing: border-box;
	height: 100vh; 
	text-align: center; 
	padding: 2vw;
	font-size: 6vw;
}

The <section> elements are already full-width. To center their content, I’ll use flexbox. Those that display backgrounds all have the same treatment, so I’ll include that in the declaration also:

<section>元素已全角。为了使内容居中，我将使用flexbox 。那些显示背景的对象都具有相同的处理方式，因此我还将在声明中包括以下内容：

section {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center; 
	flex-direction: column;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

flex-direction is used to cover any “windows” that contain multiple lines of text. In the first section, the text is larger, white and in all caps, with a text-shadow to distinguish it from the background:

flex-direction用于覆盖任何包含多行文本的“窗口”。在第一部分中，文本较大，白色且全部大写，并带有text-shadow以将其与背景区分开：

section:first-of-type {
	text-transform: uppercase;
	color: #fff;
	font-size: 8vw;
	text-shadow: 0 0 5px rgba(0,0,0,0.4);
}

Even <section> elements have a white background:

甚至 <section>元素都有白色背景：

section:nth-of-type(even) {
	background: #fff;
}

Odd <section> elements have background images:

奇怪的 <section>元素具有背景图片：

section:nth-of-type(1) {
	background-image: url(iceland-fjords.jpg);
}
section:nth-of-type(3) {
	background-image: url(iceland-pool-faces.jpg);
}
section:nth-of-type(5) {
	background-image: url(iceland-ice.jpg);
}

And that’s it! Of course, this version is limited to modern browsers that support vh, vw, and flexbox; if you were going for older browsers, CSS fallbacks are certainly possible: table-row CSS display mode for each <section>, for example.

就是这样！当然，此版本仅限于支持vh ， vw和flexbox的现代浏览器。如果您要使用较旧的浏览器，则肯定会出现CSS回退：例如，每个<section> table-row CSS显示模式。