움직이는 무지개가 강조합니다

나는 샌드위치 사이트의 디자인을 절대적으로 좋아합니다. 많은 아름다운 특징 중에는 무지개가있는이 헤드 라인이 스크롤 할 때 움직이는 밑줄이 있습니다. 스크롤 재킹이 아닙니다. 스크롤 위치를 사용하여 약간의 움직임을 제정하는 사소한 디자인 기능 일뿐입니다.

무지개를 스스로 그리기 위해 CSS에서 줄무늬를 그리는 것과 같은 개념 인 하드 스톱으로 선형 그라디언트를 사용할 수 있습니다. 그것은 CSS의 큰 덩어리이지만 괜찮습니다. 그러나 대신 배경 이미지를 선택했습니다. SVG는 661 바이트 (작은 작은)입니다. 배경 크기를 설정하여 높이를 제한하고 배경 위치로 바닥을 따라 배치하여 밑줄처럼 보일 수 있습니다.

우리는 우리는 인라인 요소로 그것을 할 수 있도록 우리는 단어가 깨진 곳에서 밑줄이 깨질 것입니다.

 H1 {
  기간 {
    배경 이미지 : URL (Spectrum.svg);
    배경 반복 : 반복 -X;
    배경 크기 : 100VW 0.2EM;
    배경 위치 : 왼쪽 하단 5px; 
  }
}

그것을 애니메이션하기 위해, 우리는 배경 위치 -x를 움직입니다. 애니메이션을하는 것은 특히 성능적인 일이 아니지만 어쨌든 실제로 애니메이션을하지는 않습니다. 스크롤 위치에 따라 움직입니다. 배경 위치 -X를 수동으로 조작하기보다는 사용자 정의 속성으로 설정 한 다음 JavaScript로 사용자 정의 속성을 조작합니다.

 배경 위치 -x : var (-crollpos);

페이지 스크롤이 쉬운 동안 해당 변수를 업데이트합니다.

 window.addeventListener ( "스크롤", e => {
  scrolltop = document.body.scrolltop을하자? document.body.scrolltop : document.documentElement.scrolltop; 
  NewPos = ScrollTop "px"를 보자;
  Document.DocumentElement.style.setProperty ( '-Scrollpos', Newpos);
});

여기서 작동합니다!

내가 문서를 사용하고있는 janky 라인을보십시오. 그것은 "스크롤 요소"가 사파리와 다른 모든 것과 다른 멍청한 크로스 브라우저입니다.

이 작업을 수행하는 동안 나는 당신이 거기에서 통증을 피하기 위해 문서를 사용할 수 있다는 것을 배웠습니다. 그것에 대한 코드에 의견을 남겨 두지만 후손을 위해 원래 줄을 남겨 두십시오.

위 내용은 움직이는 무지개가 강조합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!