CSS 앵커 포지셔닝 및 뷰 구동 애니메이션으로 댓글을 터뜨립니다

2024 CSS 상태 조사 결과가 발표되었으며 그 어느 때보 다 흥미 롭습니다. 각 섹션에는 심층 분석이 필요하지만 일반적으로 가장 일반적으로 사용되는 CSS 기능의 일부에 가장 중점을 둡니다. 웹 개발에 관한 기사를 작성하는 데 관심이 있다면 (아마도 우리와 함께 글을 쓰기 시작할 수 있습니까?) 특히 기능의 읽기 목록 섹션을 확인하고 싶을 것입니다. 설문 조사를 완료 한 후 설문 조사 응답자가 읽고 자하는 기능이 포함되어 있으며, 일반적으로 커뮤니티 인식이 적은 최신 기능으로 구성됩니다.

나를 흥분시키는 기능 중 하나는 2024 년의 최상위 선택입니다. 올해 넓은 브라우저 지원을받은 또 다른 훌륭한 기능 인 아래에서 스크롤 드라이버 애니메이션을 찾을 수 있습니다. 둘 다 우아하고 훌륭한 개발자 경험을 제공하지만 결합하면 작년에 대부분의 사람들이 보았던 새로운 가능성이 JavaScript의 영역에 빠지게됩니다.

이 두 가지 기능을 더 이해하면서 이러한 가능성 중 하나를 보여주고 싶습니다. 구체적으로, 우리는 각주가 텍스트의 각 단락 옆에 주석으로 팝업되는 블로그 게시물을 만듭니다.

이 데모의 경우, 우리의 요구 사항은 다음과 같습니다

각주가 화면에 들어가면 각주가 나타납니다. 해당 텍스트에 첨부하십시오. 각주는 화면 양쪽에 위치하므로 모바일 백업 솔루션이 필요합니다.

기본 먼저, 우리는 다음 공통 블로그 게시물 레이아웃 예제를 사용합니다 : 제목, 표지 이미지 및 바디 : . 주목해야 할 유일한 것은 때때로 각주가 포함 된 단락을 가지고 있다는 것입니다.

위치 각주 이 데모에서 각주는 우리가 댓글을 달고 자하는 텍스트 바로 뒤에 기사의 본문에 있습니다. 그러나 우리는 텍스트 옆에 떠 다니는 거품으로 첨부되기를 원합니다. 과거에는 절대 및 상대 위치 조합을 사용하고 각 각주에 대해 올바른 여백 속성을 찾아야 할 수도 있습니다.

그러나 이제 우리는 이제 앵커 위치를 사용 하여이 작업을 수행 할 수 있습니다. 앵커 위치는 다른 요소에 비해 절대적으로 배치 된 요소를 배치 할 수있는 기능입니다. 한동안 "앵커"와 "대상"에 대해 이야기하겠습니다. 처음에는 일부 용어가 필요합니다.

앵커 포인트 :

이것은 다른 요소 위치를 위치시키기위한 참조로 사용되는 요소이므로 앵커 포인트라는 이름입니다.
대상 :
• 이것은 하나 이상의 앵커 포인트에 비해 배치 된 절대 포지셔닝 요소입니다. 목표는 지금부터 우리가 사용하는 이름이지만 다른 리소스에서는 종종 "절대적으로 배치 된 요소"를 찾습니다.
• 나는 모든 세부 사항에 대해 자세히 설명하지는 않지만 더 알고 싶다면 완전한 정보와 예제가있는 앵커 포지셔닝 안내서를 적극 권장합니다.
앵커와 대상 각

가 대상 요소라는 것을 쉽게 알기가 쉽습니다. 그러나 앵커 포인트를 선택하려면 더 뉘앙스가 필요합니다. 각 요소는 앵커 요소가되어야하는 것처럼 보이지만

전체를 앵커로 선택하는 것이 좋습니다. 우리가

의 위치를 ​​절대 위치로 설정하면 다음을 설명하겠습니다 : .footnote .note 당신은 기사의 .post 요소가 일반 문서 스트림에서 제거되었으며 요소를 시각적으로 호버링하고 있음을 알 수 있습니다. 이것은 좋은 소식입니다! 그것들은 이미 세로 축에 정렬되었으므로 기사를 앵커로 사용하여 수평 축의 측면으로 옮기면됩니다. .footnote 이 시점에서, 우리는 양쪽에 배치 할 올바른 여백 속성을 찾아야합니다. 이것은 실현 가능하지만 :

때문에 고통스러운 선택입니다.

<code><main><p>
    非常有趣的信息！
     关于它的脚注
  </p>
</main></code>

당신은 마법 번호에 의존해야합니다.

뷰포트에 따라 다릅니다. .footnote 는 폭이 바뀔 때 각주의 내용에 따라 다릅니다. .note

요소는 기본적으로 앵커가 아니므로 기사를 앵커로 등록하려면

속성을 ​​사용하고 짧은 수평 식별자 (두 개의 짧은 수평선으로 시작하는 사용자 정의 이름)를 이름으로 제공해야합니다.
1. 이 경우 대상 요소는
가됩니다. 대상 요소를 사용하려면 앵커의 짧은 수평선 식별자를 취하는 속성을 ​​사용하여 절대 위치를 유지하고 앵커 요소를 선택할 수 있습니다. 이렇게하면 다음 단계에서
2. 가 대상의 기본 앵커 포인트가됩니다.
대상을 이동 의

또는 anchor-name 속성에 대한 마진 값을 선택하는 대신 함수를 사용할 수 있습니다. 앵커 포인트의 한쪽에 위치를 나타내는 값을 반환하여 항상 대상의 여백 속성을 올바르게 설정할 수 있습니다. 따라서 대상의 왼쪽을 앵커 포인트의 오른쪽에 연결할 수 있으며 그 반대도 마찬가지입니다.

그러나 그러나, 당신은 그것이 중간에 공간이없는 기사의 한쪽에 붙어 있음을 알 수 있습니다. 다행스럽게도 속성은 대상 요소를 대상으로하는 것과 같은 방식으로 작동하며 각주 대상과 포스트 앵커 사이에 약간의 공간을 남깁니다. 우리는 또한 더 아름답게 보이기 위해 더 많은 스타일을 추가 할 수 있습니다 :

<code>.footnote {
  position: absolute;
}</code>

마지막으로, 모든 .footnote 요소는 기사의 동일한쪽에 있으며, 양쪽에 정리하려면 position-anchor 선택기를 사용하여 홀수 및 심지어 주석을 선택하고 반대쪽에 설정할 수 있습니다. .post

<code>.post {
  anchor-name: --post;
}</code>

우리는 모든 형제 요소 대신

요소를 반복하기를 원하기 때문에

대신

를 사용합니다. .footnote 에서 마지막 마진 명령문을 제거한 다음

음성 를 제거해야합니다! 우리의 각주는 양쪽에 있습니다. 각주마다 작은 삼각형을 추가했지만이 기사의 범위를 벗어납니다. 뷰 드라이브 애니메이션 팝업 애니메이션을 만들어 봅시다. 보기와 스크롤 드라이브 애니메이션이 가능한 한 직관적이기 때문에 이것이 가장 쉬운 부분이라는 것을 알았습니다. 먼저 Common .footnote를 사용하여 애니메이션을 등록합니다. 우리가 원하는 것은 각주를 보이지 않게 시작한 다음 천천히 점점 더 커지고 눈에 띄게하는 것입니다. 이것은 우리의 애니메이션입니다. 이제 우리는 단지 : 에 추가하면됩니다.

이것은 자체가 아무것도하지 않습니다. 우리는 보통 시작하기 위해 a 를 설정했습니다. 그러나보기 중심 애니메이션은 설정 시간을 통과하지 않지만 애니메이션 진행 상황은 화면의 요소 위치에 따라 다릅니다. 이를 위해

로 를 설정합니다.

요소가 화면을 떠날 때 애니메이션이 끝납니다. 우리는 그것이 더 읽기 쉬운 위치로 끝나기를 원합니다. 마지막 터치는 @keyframes로 를 설정하는 것입니다. 이것은 "요소가보기에서 0% 일 때 애니메이션을 시작하고 시야에서 40% 일 때 끝나는 것을 의미합니다."

Bramus의 놀라운 도구는 스크롤 및 뷰 구동 애니메이션에 더 중점을 두어

<code><main><p>
    非常有趣的信息！
     关于它的脚注
  </p>
</main></code>

속성의 작동 방식을 더 잘 보여줍니다.

모바일 터미널을 실행할 때 어떻게해야합니까? .footnote 기사의 양쪽에 공간이 없기 때문에이 각주 방법이 작은 화면에서 작동하지 않는다는 것을 알 수 있습니다. 수정은 매우 간단합니다. 우리는 각주가 작은 화면에서 정상적인 각주로 나타나고 큰 화면에 대한 주석으로 나타나기를 원합니다. 화면이 특정 임계 값 (약 1000 픽셀)보다 큰 경우에만 주석을 표시하여 수행 할 수 있습니다. 그렇지 않은 경우, 주석은 웹에서 찾은 다른 의견과 마찬가지로 기사의 본문에 나타납니다.

<code>.footnote {
  position: absolute;
}</code>

이제, 우리의 의견은 충분한 공간이있는 경우 양쪽에만 표시됩니다 :

요약 당신이 열정적 인 콘텐츠를 작성하는 것을 좋아한다면, 당신은 종종 임의의 탄젠트에 들어가거나 각 단락에 댓글을 추가하여 추가 컨텍스트를 제공하려고합니다. 적어도 그건 내 경우이므로 의견을 동적으로 표시 할 수 있다는 것이 좋은 추가입니다. 특히 우리가 CSS만으로 이것을 할 수있을 때 - 이것은 우리가 1 년 전에 할 수 없었던 일입니다! animation-duration

위 내용은 CSS 앵커 포지셔닝 및 뷰 구동 애니메이션으로 댓글을 터뜨립니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!