纯HTML+CSS 拉窗帘效果

大标 2022年3月16日19:11:51
评论
21

拉窗帘效果

第一次看到这种效果的时候,感觉很惊艳,以为是js实现的,实际上纯HTML+CSS就能实现。

表现

上下两个白色区域都是正常的页面滚动行为,中间有颜色区域比较特殊,“拉窗帘效果”的文字滚动到一定位置后停止了,直到蓝色窗帘完全拉起之后才继续滚动,并且,在窗帘底部穿过文字时,文字呈现两种颜色。

实现

简单起见,这里只实现中间部分,只需要两个元素。

<!-- 放窗帘的容器 -->
<div class=\"curtain\">
  <!-- 放文字的容器 -->
  <div class=\"invert\">拉窗帘效果</div>
</div>

设置一些变量

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

设置窗帘容器的背景,并使用::after伪元素作为小麦色块添加到窗帘容器底部

.curtain {
  /* 创建分割背景色块 */
  background-image: linear-gradient(to bottom, var(--color2) 50%, var(--color1) 50%);
}

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

实现滚动暂停效果

为文字容器.invert设置position: sticky定位,使文字容器相对于他最近的滚动元素(也就是body)按left、top、right、bottom偏移

.invert {
  position: sticky;
  top: 0px;

  /* 将元素内容的颜色与.curtain的背景混合 */
  mix-blend-mode: difference;

  /* 居中 */
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: var(--minh);
  color: var(--color1);
  font-size: 100px;
  font-weight: bold;
}

演示

在线演示Demo,包括上下白色块的完整Demo

GitHub

原文链接:https://css-tricks.com/css-raise-the-curtains-effect/

  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微信公众号
  • 微信扫一扫
  • weinxin
大标
  • 本文由 发表于 2022年3月16日19:11:51
  • 转载请务必保留本文链接:https://www.tanhuibiao.com/script/html-css/5075.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: