用CSS 写一个拉开帷幕 效果

codercao
2,088 阅读3分钟

我正在参加「创意开发 投稿大赛」详情请看：掘金创意开发大赛来了！

拉开帷幕效果，即当滚动到元素上时，背景和文本都会改变颜色。页面背景从暗到亮，上面的内容也从亮到暗，同时处于吸附（sticky）定位。

一、前期基础准备

1.1 HTML 开始

image.png 为了模拟真实情况，我们用几个元素先把基本的htmL结构定义一下，首选需要一个容器放我们的帷幕 ，我们给他定义一个class curtain；在内部有一个 .invert子元素，它将是作为我们的吸附（sticky）定位框，最后空间内部的内容文本展示区 h2

  <html>
    <head>
      <meta charset="utf-8" />
      <title></title>
    </head>
    <body>
      <div class="title">网站标题</div>
      <div class="curtain">
        <div class="invert">
          <h2>用CSS 写一个‘拉起帷幕’ 效果</h2>
        </div>
      </div>
    </body>
  </html>

1.2 设置 CSS 变量

创建CSS变量的原因是，这可以很容易地将它们写入样式中，并在以后可以根据需要随时修改他们

:root { 
    --minh: 100vh; 
    --color1: wheat; 
    --color2: midnightblue;
}

二、开始编写 拉开帷幕效果

2.1 设置.curtain的样式

接下来我们给 .curtain节点，添加背景颜色，然后使用::after伪元素将额外的空间添加到底部。这样，我们的吸附的内容，实际上会在滚动经过::after元素时粘在容器上。这样就可以产生一个视觉效果（错觉）。

.curtain { 
    background-image: linear-gradient(to bottom, var(--color2) 50%, var(--color1) 50%); 
} 

.curtain::after { 
    content: ""; 
    display: block; 
    min-height: var(--minh);
}

知识点 CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片，我们这里创建上下两个不同颜色的背景图颜色。

image.png

2.2 设置.invert的样式

  • position: sticky并设置吸附顶部的位置。
  • mix-blend-mode: difference <h2>将元素内部内容的颜色混合到.curtain的背景渐变中。
  • display: flex 将演示内容居中。
  • min-height 定义容器的高度并允许底部的额外空间。
  • color h2设置标题的颜色
.invert { 
    position: sticky; 
    top: 0px; 
    mix-blend-mode: difference;
    display: flex;
    align-items: center; 
    justify-content: center;
    min-height: var(--minh);
} 
h2 {
  color: var(--color1);
}

这里重点提一下 mix-blend-mode 属性difference我们的内容与背景融合在一起。该difference值很复杂，通俗一点就是上方图层的亮区将下方图层的颜色进行反相，暗区则将颜色正常显示出来，效果与原图像是完全相反的颜色。 image.png

为了使混合工作，我们需要设置标题的颜色。在这种情况下，我们将浅色值分配给--color1变量，这样就可以实现像文章开头的效果了（录屏不够丝滑，现实中会好一些）

curtains-effect1.gif

github 可看完整代码

三、 一些问题的思考

如果吸附的内容不是纯文本，是图片的话，有写图片反转颜色会看起来不友好。这个方案主要用了两个大家平时可能比较少用的CSS linear-gradient() 函数 和 mix-blend-mode 属性，对应的自然就有浏览器支持情况，您要是感兴趣也可以深挖其更有趣的内容和应用。这个简单的方式不用JS 实现这个‘拉开帷幕’ 效果，在浏览器上变现还是挺流畅的，具体实用性的话，可能需要根据自身的需求来进行改造。

avatar
文章
阅读
粉丝