拉窗簾效果

第一次看到這種效果的時候，感覺很驚豔，以為是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/