CSS实现剪切蒙版视差滚动效果_F11 - 专业站长和开发者的学习网站

分享到

CSS实现剪切蒙版视差滚动效果

css 来源：互联网作者：佚名发布时间：2024-02-29 22:05:27 人浏览

摘要

大家应该都知道响应式吧，像什么响应式布局等等，这都是我们在开发中经常能遇到的。在年前结束的一个公司项目中，涉及到了相关响应式的应用，然后在查找响应式的资料的时候，发现了

大家应该都知道响应式吧，像什么响应式布局等等，这都是我们在开发中经常能遇到的。在年前结束的一个公司项目中，涉及到了相关响应式的应用，然后在查找响应式的资料的时候，发现了剪切蒙版视差滚动这个内容，因此便借着这个机会，来好好学习一下，便有了今天这个响应式剪贴蒙版视差滚动效果。

剪切蒙版视差

这里简单介绍一下剪切蒙版视差。

它是一种在网页设计中常用的视觉效果技术。在实现剪切蒙版视差效果时，通常会将不同层级的元素分为多个背景层和一个前景层。背景层通常包括背景图片、背景颜色等，而前景层则包括文字、按钮等内容。通过设置不同层级元素的滚动速度，使得前景层在滚动时速度较快，而背景层则速度较慢，从而营造出前景和背景之间的差异。

通过这种技术，能够吸引用户的注意力，提高用户对网页内容的关注度。话不多说，先来看一下关于今天要实现的这个效果的预览吧。

效果预览

以上就是整个效果的预览状态，接下来将带大家来实现它。

HTML

我们先来看到HTML部分，在这里我们创建了三个段落，相关代码如下。

<p>

内容可自定义

</p>

</div>

</section>

<p>

内容可自定义

</p>

</div>

</section>

<h2>Tailwind</h2>

<p>

内容可自定义

</p>

</div>

</section>

这三个段落分别由标题，内容以及链接组成，其中内容部分可自定义。这里就是我们前面提及到的前景层，而背景层就是由多个不同的背景图组成。有了前景层和背景层，下面就到了CSS样式的设计环节。

CSS

首先我们把背景图片准备好。

section:nth-child(1) .content h2 {

background-image: url(//img.jbzj.com/file_images/article/202402/2024227154346811.jpg);

background-size: cover;

}

section:nth-child(2) .content h2 {

background-image: url(//img.jbzj.com/file_images/article/202402/2024227154346811.jpg);

background-size: cover;

}

section:nth-child(3) .content h2 {

background-image: url(//img.jbzj.com/file_images/article/202402/2024227154346811.jpg);

background-size: cover;

}

这里我们准备了三张不同的背景图，作为背景层。如果有n个段落，就准备n张背景图，它们是一一对应关系。

接着我们来给每个段落赋予样式。

section {

position: relative;

width: 100%;

min-height: 100vh;

display: flex;

justify-content: center;

align-items: center;

padding: 50px 0;

}

section .content {

text-align: center;

}

section .content h2 {

font-size: 24vw;

font-weight: 900;

line-height: 1.5em;

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-attachment: fixed;

}

在这里我们定义了一些样式来设置section元素以及section里面的子元素的外观和布局。首先将该元素的定位方式为相对定位。这意味着该元素的位置将相对于其正常位置进行偏移。其次将元素的布局设置为弹性布局，这样子元素可以根据需要自动调整大小和位置。

接下来，content类段落中的内容元素，设置文本内容居中对齐。

最后，对于标题元素，通过-webkit-background-clip: text和-webkit-text-fill-color: transparent使得文字内容透明显示。并且通过background-attachment: fixed将h2元素的背景图像固定在视口中，不随滚动而移动。
到这里主体效果已经能展现出来了，剩下的都是一些样式上的润色和优化。关于这里的完整代码大家可以前往码上掘金查看。

您可能感兴趣的文章 :

原文链接 :

Tag : css(304)

使用CSS实现有趣的汉堡菜单按钮的代码

使用transition过渡属性和transform变形属性，让汉堡图标和关闭图标之间进行过渡、变形，形成视觉效果。适用于h5页面或者app页面中，隐藏菜
CSS实现菜单箭头动画效果

其实是很简单的一个效果思路：箭头图标相对li标签绝对定位，定位到列表之外+列表元素overflow：hidden +悬停动画 html 1 2 3 li class=listyle1 im
CSS实现剪切蒙版视差滚动效果

大家应该都知道响应式吧，像什么响应式布局等等，这都是我们在开发中经常能遇到的。在年前结束的一个公司项目中，涉及到了相关响应
CSS实现好看的聚光灯效果介绍

使用-webkit-background-clip和clip-path，并配合animation属性，实现一个好看聚光灯效果。可适用于页面加载或展示页面大标题内容。核心代码部分
CSS合并单元格四种方式示例介绍(table/display/flex

效果图：方式一：table【最简单写法】 colspan：规定单元格可横跨的列数。 rowspan：规定单元格可横跨的行数。通过table的colspan和rowspan轻松
css中position:sticky粘性定位介绍

1、什么是粘性定位？粘性定位它基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在position:relative与position:fixed定位之间
使用CSS完成视差滚动效果介绍

在网页设计中，视差滚动效果可以为用户带来沉浸式的浏览体验。本文将详细介绍如何使用 CSS 来实现视差滚动效果。视差滚动效果的原理
使用CSS实现多行文本擦除效果的介绍

今天来实现一个多行文本擦除的效果，有种经典咏流传节目中表演开始前阅读诗句的一些既视感，在工作中其实也遇到过这样的需求当时是
CSS中Position:Sticky不起作用的问题解决

sticky属性不生效：检查浏览器兼容性；检查是否指定了阈值；检查 Safari 的供应商前缀；检查祖先元素是否具有overflow属性集；检查heig
css通过子元素选择父元素的实现介绍

伪类:has选择父元素 1 2 3 4 5 6 7 8 td:has( .unfoldTable){ //可选中所有td下包含unfoldTable的class标签的td属性 color: red; } td:has( div){ //可选中所有td下包