[CSS] Raise the Curtains

Raise the Curtains

스크롤의 배경이 dark 에서 light 으로 바뀌고, 위에 있는 내용도 sticky position 일 때, light 에서 dark으로 바뀌는 효과를 말한다.

오직, HTML 과 CSS로만 구현을 해볼 것이다.

HTML

<div class="curtain">
  <div class="invert">
    <h2>Curtain Effect</h2>
  </div>
</div>

Set up some CSS variables

css 변수를 만들어 , 나중에 필요에 따라 쉽게 변경할 수 있도록 세팅한다.

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

.Curtain Draw

• A linear-gradient for the “split” background
• min-height for the extra space at the bottom of the container

가상 요소 (pseudo-element)를 사용하여 하단에 추가 공간을 만든다.

.curtain {
  /** create the "split" background **/
  background-image: linear-gradient(to bottom, 
  					var(--color2) 50%, var(--color1) 50%);
}

/** add extra space to the bottom
(need this for the "sticky" effect) **/
.curtain::after {
  content: "";
  display: block;
  min-height: var(--minh);
}

Making sticky content

• position: sticky and top define the stickiness and where it sticks.
• mix-blend-mode: difference blends the color of the content inside the h2 element into the .curtain‘s background gradient.
• display: flex centers the content for presentation.
• min-height defines the height of the container and allows for the extra space at the bottom.
• color sets the color of the h2 heading.

.invert {
  /** make the content sticky **/
  position: sticky;
  top: 20px;

  /** blend the content with the contrast effect **/
  mix-blend-mode: difference;

  /** center the content **/
  display: flex;
  align-items: center;
  justify-content: center;
  
  /** set the minimum height of the section **/
  min-height: var(--minh);
}

h2 {
  /** set the color of the text **/
  color: var(--color1);
}

mix-blend-mode: difference ?

CSS를 이용하여 간단하게 텍스트 색상을 반전하는 방법이다.
값을 "difference"로 설정하면 아래 깔린 요소에 반전된 색상을 나타낼 수 있다.

참고 사이트

• https://studiomeal.com/archives/888 (CSS 텍스트 반전 효과)
• https://studiomeal.com/archives/852 (CSS로 흑백이미지 만들기)

“Raise the Curtains” Demo

REFERENCE

• https://css-tricks.com/css-raise-the-curtains-effect/