CSS에서 '커튼 높이'효과를 만드는 방법

"커튼을 올리기"라고 부르는이 CSS 효과는 스크롤에 시각적으로 눈에 띄는 전환을 만듭니다. 배경은 어두운 곳에서 빛으로 이동하는 반면, 끈적 끈적한 내용은 밝은 곳에서 어두운 곳으로 전환됩니다.

실제 응용 프로그램에서 보이는 방법은 다음과 같습니다. [예제 링크 - 사용 가능한 경우 실제 링크로 바꾸십시오]

이 효과를 만드는 방법을 배울 준비가 되셨습니까? 간단한 HTML 및 CSS 구현으로 다이빙합시다.

HTML 구조

명확성을 위해 단순화 된 버전을 사용하겠습니다.

<div class="curtain">
  <div class="invert">
    <h2>섹션 제목</h2>
  </div>
</div>

이것은 배경 효과를 위해 .curtain 컨테이너를 사용하고, 끈적 .invert 컨텐츠의 아동 요소 및<h2></h2> 제목을 위해.

CSS 변수

쉽게 사용자 정의 할 수 있도록 CSS 변수를 정의합니다.

 : 루트 {
  -MINH : 98VH;
  -Color1 : 밀;
  -Color2 : Midnightblue;
}

이 변수는 컨테이너 높이 ( --minh ), 밝은 색 ( --color1 ) 및 어두운 색 ( --color2 )을 제어합니다.

커튼 효과 생성

.curtain 요소는 배경 분할을위한 선형 구배를 사용하고 추가 바닥 공간에는 min-height 사용됩니다.

 .curtain {
  백그라운드 이미지 : 선형 등급 (바닥까지, var (-color2) 50%, var (-color1) 50%);
}

.curtain :: 이후 {
  콘텐츠: "";
  디스플레이 : 블록;
  Min-Height : var (-minh);
}

::after 추가 공간의 환상을 만들어 끈적 끈적한 콘텐츠가 컨테이너 내에 남아 있도록합니다.

끈적 끈적한 컨텐츠 구현

.invert 클래스 스타일은 끈적 끈적한 컨텐츠 :

 .invert {
  위치 : 스티커;
  상단 : 20px;
  믹스 블렌드 모드 : 차이;
  디스플레이 : Flex;
  정렬 구조 : 센터;
  정당화 컨텐츠 : 센터;
  Min-Height : var (-minh);
}

H2 {
  색상 : var (-color1);
}

position: sticky 하고 top 끈적 끈적한 효과를 만듭니다. mix-blend-mode: difference 컨텐츠 색상과 배경 구배와 혼합되어 역 효과를 만듭니다. Flexbox가 컨텐츠를 중심으로합니다.

mix-blend-mode: difference 반전 효과를 만듭니다. mix-blend-mode 값에 대한 시각적 설명은이 CSS- 트릭 Almanac Demo를 참조하십시오 : [CSS 트릭 데모 링크-사용 가능한 경우 실제 링크로 교체하십시오]

데모 및 고려 사항

효과를 보여주는 라이브 데모는 여기에서 찾을 수 있습니다. [데모 링크 - 사용 가능한 경우 실제 링크로 교체]

중요한 메모 :

• 끈적 끈적한 콘텐츠 내의 이미지는 색상 반전으로 잘 렌더링되지 않을 수 있습니다. SVG 또는 투명한 PNG를 고려하십시오.
• mix-blend-mode: difference 컨테이너의 transform 과 같은 특정 속성에서는 차이가 잘 작동하지 않습니다.

이 기술은 HTML 및 CSS 만 사용하여 시각적으로 매력적인 "커튼 높이"효과를 만들기위한 깨끗하고 브라우저 호환 솔루션을 제공합니다. 이 효과를 어떻게 사용할 것인지 의견에 알려주십시오!

위 내용은 CSS에서 '커튼 높이'효과를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!