[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
Author And Source
이 문제에 관하여([CSS] Raise the Curtains), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@godud2604/CSS-Raise-the-Curtains-o1cufsan저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)