스크롤의 솔리드에서 녹아웃 텍스트로 이동합니다

이 CSS 트릭은 배경 이미지 스크롤로 단색에서 녹아웃 텍스트로 전환하는 매혹적인 제목을 만듭니다. HTML 및 CSS 만 사용하여 달성 된이 효과에는 2 개의 고정 위치 컨테이너가 포함됩니다. 하나는 녹아웃 텍스트가있는 흰색 배경을 표시합니다. 다른 하나는 흰색 텍스트가있는 배경 이미지입니다. 영리한 클리핑 기술은 스크롤 위치를 기반으로 텍스트를 숨기고 공개하여 백그라운드 변경을 시뮬레이션합니다.

중요 참고 : 이 기술은 이전 Internet Explorer 버전 또는 모바일 WebKit 브라우저에서 제대로 작동하지 않을 수 있습니다. 호환성을위한 폴백 솔루션 구현을 고려하십시오.

HTML 구조

HTML은 각각 두 개의 동일한 용기를 포함하는 외부 포장지로 구성됩니다.<h1></h1> .title_wrapper div 내의 요소 :

<div class="wrapper">
  <div class="container container_solid">
    <div class="title_wrapper">
      <h1 id="대단한-야외">대단한 야외</h1>
    </div>
  </div>

  <div class="container container_image" aria-hidden="true">
    <div class="title_wrapper">
      <h1 id="대단한-야외">대단한 야외</h1>
    </div>
  </div>
</div>

각 컨테이너는 .container 클래스와 고유 식별자 ( .container_solid , .container_image )를 사용합니다. 이를 통해 공유 기본 스타일 및 개별 타겟팅이 가능합니다.

초기 CSS 스타일

CSS는 두 컨테이너를 전체 화면 높이 ( 100vh )로 설정합니다. .container_solid 흰색 배경을 받고 .container_image 는 고정 된 배경 이미지를 가져옵니다.

 .wrapper {
  위치 : 상대; / * 적절한 포지셔닝을 위해 추가 */
  높이 : 100%;
  오버플로 : 숨겨진; / * 더 나은 오버플로 제어를 위해 추가 */
}

.Container {
  높이 : 100VH;
  위치 : 절대;
  너비 : 100%;
  왼쪽 : 0;
}

.Container_Solid {
  배경 : 흰색;
  상단 : 0;
}

.container_image {
  배경-이미지 : url (/path/to/img.jpg);
  배경 크기 : 100VW 자동;
  배경 위치 : 센터;
  배경 상착 : 고정;
  상단 : 100VH;
}

그만큼<h1></h1> 요소는 스타일입니다. .container_image 의 텍스트는 흰색입니다. .container_solid 's<h1></h1> 폴백 검은 색으로 녹아웃 효과를 위해 background-clip: text 사용합니다.

 .title_wrapper h1 {
  위치 : 절대; / * 정확한 포지셔닝을 위해 추가 */
  상단 : 50%;
  왼쪽 : 50%;
  변환 : 번역 (-50%, -50%);
  텍스트 정렬 : 센터;
  글꼴 크기 : 4EM; / * 예제 글꼴 크기 */
}

.Container_Solid .Title_Wrapper H1 {
  배경 : URL (https://images.unsplash.com/photo-1575058752200-a9d6c0f41945?ixlib=rb-1.2.1&q=85&fm=jpg&crop=ertropy&cs=srgb&ixid=eyjhchbfawqioje0ntg5fqq);
  배경 크기 : 100VW 자동;
  배경 위치 : 센터;
  -webkit-text-fill-color : 투명;
  텍스트 필색 : 투명;
  -webkit-background-clip : 텍스트;
  배경 클립 : 텍스트;
  색상 : 검은 색;
}

.container_image .title_wrapper h1 {
  색상 : 흰색;
}

클리핑 및 컨테이너 포지셔닝

중요한 단계는 컨테이너를 클리핑하여 넘치는 콘텐츠를 숨기는 것입니다. 수동 포지셔닝이 필요한 절대 포지셔닝이 사용됩니다.

 .Container {
  클립 : rect (0, 자동, 자동, 0);
  오버플로 : 숨겨진;
  위치 : 절대;
  높이 : 100VH;
  왼쪽 : 0;
  너비 : 100%;
  -webkit-mask-image : -webkit-linear-gradient (상단, #ffffff 0%, #ffffff 100%); / * 사파리 수정 */
}

.container_image top: 100vh; 에 배치되어 있습니다 .container_solid .

접근성 개선

aria-hidden="true" 속성은 .container_image 에 추가되어 화면 리더 에게이 컨테이너가 순전히 장식적임을 알립니다.

이 정제 된 접근 방식은 시각적 매력과 접근성을 보장합니다. 텍스트와 전반적인 효과를 개인화하기 위해 추가 스타일 조정을 수행 할 수 있습니다. 동적 효과를 추가 할 때는 항상 접근성 고려 사항을 우선시해야합니다.

위 내용은 스크롤의 솔리드에서 녹아웃 텍스트로 이동합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!