스크롤 구동 끈적 끈적한 제목

스크롤 구동 애니메이션은 훌륭합니다! 그들은 개발자가 요소의 움직임과 변환을 사용자의 두루마리 위치로 직접 묶을 수있는 강력한 도구입니다. 이 기술은 대화식 경험을 만들고 이미지가 나타나는 큐, 무대를 가로 질러 활공하는 텍스트, 미묘하게 바꾸는 배경을 만들 수있는 새로운 방법을 열어줍니다. 신중하게 사용하면 스크롤 구동 애니메이션 (SDA)은 웹 사이트를보다 역동적이고 매력적이며 반응을 느낄 수 있습니다.

몇 주 전, 나는 스크롤 구동 애니메이션을 가지고 놀았고, 당신이 할 수있는 모든 종류의 임의의 일을 검색했습니다. 그때 나는 메인 헤딩 (H1)의 텍스트를 애니메이션하고 SDA를 사용하여 페이지의 사용자의 스크롤 위치에 따라 제목 자체를 변경하려는 아이디어를 생각해 냈습니다. 이 기사에서는 그 아이디어를 무너 뜨리고 단계별로 재건 할 것입니다. 이것이 우리가 향하는 일반적인 방향이며, 전체 화면에서 더 좋아 보이고 크롬 브라우저에서 볼 수 있습니다.

이 예제의 효과는 스크롤 구동 애니메이션을 지원하는 브라우저에서만 작동합니다. SDA가 지원되지 않는 경우 정적 제목에 적절한 폴백이 있습니다. 접근성 관점에서 브라우저가 모션 활성화를 줄이거 나 보조 기술을 통해 페이지에 액세스 할 경우 효과가 비활성화되고 사용자는 모든 내용을 시맨틱하고 액세스 가능한 방식으로 얻습니다.

빠른 참고 사항 : 이 접근법은 키 프레임에 대한 몇 가지 "마법 숫자"에 의존하며 나중에 이야기 할 것입니다. 놀랍게도 반응이 좋지만이 방법은 정적 콘텐츠에 가장 적합하며 역동적 인 웹 사이트에는 이상적이지 않습니다.

애니메이션을 자세히 살펴보십시오

스크롤 구동 애니메이션에 뛰어 들기 전에 잠시 시간을내어 텍스트 애니메이션 자체와 실제로 작동하는 방법을 살펴 보겠습니다. 이것은 타자기 효과를 만들고 싶었을 때 몇 년 전의 아이디어를 기반으로합니다. 당시에 내가 찾은 대부분의 방법은 요소의 너비를 애니메이션하는 것과 관련이 있으며, 단호한 글꼴 또는 단색 배경을 사용해야했습니다. 아무도 나를 위해 실제로 일하지 않았습니다. 그래서 나는 내용 자체를 애니메이션 할 수있는 방법을 찾았고, 해결책은 종종 의사 요소에 있었다.

의사 요소에는 컨텐츠 속성이 있으며 그 텍스트를 애니메이션 할 수 있습니다. 정확히 애니메이션은 아니지만 콘텐츠를 동적으로 변경할 수 있습니다. 멋진 부분은 변경되는 유일한 것은 텍스트 자체이며 다른 트릭이 필요하지 않다는 것입니다.

견고한 기초로 시작하십시오

이제 텍스트 애니메이션의 요령을 알았으므로 스크롤 구동 애니메이션과 결합하는 방법을 살펴보고 견고하고 액세스 할 수있는 폴백도 확인하십시오.

우리는 몇 가지 기본 시맨틱 마크 업으로 시작합니다. 내부에 개별 섹션이있는 모든 것을 기본 요소로 랩핑하겠습니다. 각 섹션에는 텍스트 및 이미지와 같은 자체 제목 및 콘텐츠가 제공됩니다. 이 예를 들어, 나는 각각 약간의 텍스트와 일부 이미지를 가진 4 개의 섹션을 기본 색상에 대해 설정했습니다.

<main>
  <section>
    <h1>기본 색상</h1>
    <p>세 가지 기본 색상 (빨간색, 파란색 및 노란색)은 컬러 휠의 다른 모든 색상의 기초를 형성합니다. 다른 조합으로 혼합하면 광범위한 색조가 생성됩니다.</p>
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175228405842915.jpg" class="lazy" alt="스크롤 구동 끈적 끈적한 제목">
  </section>
  
  <section>
    <h2>빨간 전원</h2>
    <p>빨간색은 대담하고 생생한 색상으로 에너지, 열정 및 따뜻함을 상징합니다. 그것은 쉽게 관심을 끌고 종종 강한 감정과 관련이 있습니다.</p>
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175228406079019.jpg" class="lazy" alt="스크롤 구동 끈적 끈적한 제목">
  </section>
  
  <section>
    <h2>푸른 진정</h2>
    <p>파란색은 평온, 안정성 및 신뢰를 나타내는 차분하고 시원한 색입니다. 하늘과 바다의 이미지를 불러 일으켜 평화로운 분위기를 만듭니다.</p>
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175228406146761.jpg" class="lazy" alt="스크롤 구동 끈적 끈적한 제목">
  </section>
  
  <section>
    <h2>노란 기쁨</h2>
    <p>노란색은 밝고 쾌활한 색상이며 빛, 낙관주의 및 창의성을 위해 서 있습니다. 그것은 눈에 잘 띄고 행복과 희망의 감각을 가져옵니다.</p>
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175228406273727.jpg" class="lazy" alt="스크롤 구동 끈적 끈적한 제목">
  </section>
</main>

스타일링에 관해서는, 나는이 단계에서 특별한 일을하지 않고 기본만으로도하지 않습니다. 글꼴을 변경하고 텍스트와 제목 크기를 조정하고 메인 및 섹션의 디스플레이를 설정하고 이미지 크기를 객체 적합으로 수정했습니다.

따라서이 시점에서 우리는 정적, 의미 및 접근 가능한 컨텐츠가있는 간단한 사이트를 가지고 있습니다. 이제 목표는 효과를 추가하기 시작할 때 그렇게 유지되는 것입니다.

두 번째 첫 번째 제목

메인 상단에 또 다른 H1 요소를 추가하여 시작하겠습니다. 이 새로운 요소는 사용자의 스크롤 위치에 따라 업데이트되는 애니메이션 텍스트의 자리 표시 자 역할을합니다. 그리고 네, 첫 번째 섹션에 이미 H1이 있다는 것을 알고 있습니다. 괜찮습니다. 한 번에 하나만 액세스 할 수 있도록 잠시 후에 해결할 것입니다.

<h1 aria-hidden="true"> 기본 색상</h1>

이 제목에 aria-hidden = "true"를 추가 했으므로 화면 리더가 픽업하지 않습니다. 이제 다른 모든 제목에 스크린 리더 인 .sronly를 위해 특별히 수업을 추가 할 수 있습니다. 이런 식으로 콘텐츠를 "정상적으로"보는 사람은 누구나 애니메이션 제목 만 볼 수있는 반면 보조 기술 사용자는 정기적 인 정의 의미 제목을 얻을 수 있습니다.

참고 : .sronly 클래스의 스타일은 Scott O'Hara의“포괄적으로 숨겨진”을 기반으로합니다.

처리 지원

접근성 문제만큼, 우리가 명심해야 할 또 다른 우려가 있습니다 : 지원. CSS 스크롤 구동 애니메이션은 환상적이지만 여전히 모든 곳에서 완전히 지원되지는 않습니다. 그렇기 때문에 SDA를 지원하지 않는 브라우저에 정적 버전을 제공하는 것이 중요합니다.

첫 번째 단계는 디스플레이를 사용하여 방금 추가 한 애니메이션 제목을 숨기는 것입니다. 그런 다음 SDA 지원을 확인하기 위해 새 @Supports 블록을 추가합니다. SDA가 지원되는 해당 블록 내부에서 제목을위한 디스플레이를 다시 변경할 수 있습니다.

.sronly 클래스는 @supports 블록으로 이동해야합니다. 효과가 활성화 될 때만 지원되지 않을 때만 적용되기를 원하기 때문입니다. 이런 식으로 보조 기술과 마찬가지로 SDA 지원이없는 브라우저의 페이지를 방문하는 사람은 여전히 정적 컨텐츠를 얻을 수 있습니다.

 .ScrollDrivenHeading {
  디스플레이 : 없음;
}

@Supports (Animation-timeline : scroll ()) {
  .ScrollDrivenHeading {
    디스플레이 : 블록;
  }
  
  / * 화면 독자 전용 */
  .sronly {
    클립 : rect (0 0 0 0); 
    클립 경로 : 삽입 (50%);
    높이 : 1px;
    오버플로 : 숨겨진;
    위치 : 절대;
    흰색 공간 : Nowrap; 
    너비 : 1px;
  }
}

끈적 끈적해

다음으로해야 할 일은 제목의 끈적 거림을 처리하는 것입니다. 제목이 항상 화면에 유지되도록하기 위해, 우리는 뷰포트의 상단에 붙어있는 상단 : 0을 고착하도록 위치를 설정합니다.

우리가 그것을하는 동안, 배경을 포함한 기본 스타일을 추가하여 텍스트가 제목 뒤에있는 것, 간격을위한 약간의 패딩 및 흰색 공간과 혼합되지 않도록하자.

 / * @Supports 블록 내부 */
.ScrollDrivenHeading {
  디스플레이 : 블록;
  위치 : 스티커;
  상단 : 0;
  배경 이미지 : 선형 그레이드 (0DEG, 투명, 검은 색 1EM);
  패딩 : 0.5EM 0.25EM;
  흰색 공간 : Nowrap;
}

이제 모든 것이 설정되었습니다. 정상적인 조건에서는 페이지 상단에 단일 끈적 끈적한 제목이 표시됩니다. 또한 누군가가 보조 기술 또는 SDA를 지원하지 않는 브라우저를 사용하는 경우에도 정기적 인 정적 콘텐츠를 얻을 수 있습니다.

이제 우리는 텍스트를 애니메이션 할 준비가되었습니다. 거의…

마법 번호

텍스트 애니메이션을 만들려면 텍스트가 어디에 변경되어야하는지 정확히 알아야합니다. SDA를 사용하면 스크롤링이 기본적으로 타임 라인이되며 해당 타임 라인의 정확한 점을 결정하여 애니메이션을 트리거해야합니다.

이를보다 쉽게 만들고 해당 위치를 정확히 찾아 내기 위해 다음 스크립트를 준비했습니다.

 @property--scroll-position {
  구문 : "<number> ";
  상속 : 거짓;
  초기 값 : 0;
}

바디 :: 후 {
  카운터 리셋 : SP var (-Scroll-position);
  내용 : 카운터 (sp) "%";
  위치 : 고정;
  상단 : 0;
  왼쪽 : 0;
  패딩 : 1em;
  배경색 : 적갈색;
  애니메이션 : 스크롤 위치 단계 (100);
  애니메이션-타이 라인 : 스크롤 ();
}

@keyframes scrollosposition {
  0% {-scroll-position : 0; }
  100% {-scroll-position : 100; }
}</number>

이 코드에 너무 깊이 들어가고 싶지는 않지만 아이디어는 텍스트를 애니메이션하는 것과 같은 스크롤 타임 라인을 가져 와서 스크롤 진행 상황을 기반으로 0에서 100까지 사용자 정의 속성 (-scroll-position)을 애니메이션하고 컨텐츠에 그 값을 표시하는 데 사용하는 것입니다.

코드 시작시 이것을 추가하면 화면의 왼쪽 상단에 작은 빨간 사각형이 표시되어 현재 스크롤 위치가 백분율 (키 프레임과 일치)으로 표시됩니다. 이렇게하면 원하는 섹션으로 스크롤하여 각 제목이 시작되는 비율을 쉽게 표시 할 수 있습니다.

이 방법과 약간의 시행 착오를 통해 제목이 30%, 60%및 90%로 변경되기를 원했습니다. 그렇다면 실제로 어떻게해야합니까? 애니메이션을 시작합시다.

애니메이션 텍스트

먼저, .scrolldrivenHeading 요소 내부의 내용을 지우려면 비어 있고 동적 컨텐츠를 준비 할 수 있습니다. CSS에서는 제목에 의사 요소를 추가 할 것입니다. 공허한 콘텐츠를 제공하고, 애니메이션 이름을 설정하고, 물론 Scroll ()에 애니메이션 타이 라인을 할당합니다.

그리고 개별 유형 인 컨텐츠 속성을 애니메이션하고 있으므로 값간에 부드럽게 전환되지 않습니다. 그것은 단지 하나에서 다음으로 점프합니다. 애니메이션 타이밍 기능 속성을 스텝 엔드로 설정하면 각 변경 사항이 정의하는 키 프레임에서 정확히 발생하는지 확인하므로 텍스트가 그 사이의 곳이 아닌 원하는 위치를 정확하게 전환합니다.

 .ScrollDrivenHeading {
  /* 스타일 */

  &::후에 {
    콘텐츠: '';
    애니메이션-이름 : HeadingContent;
    애니메이션 타이밍 기능 : 단계-엔드;
    애니메이션-타이 라인 : 스크롤 ();
  }
}

키 프레임의 경우이 부분은 매우 간단합니다 (현재). 첫 번째 프레임 (0%)을 첫 번째 제목으로 설정하고 다른 제목을 이전에 찾은 백분율로 할당합니다.

 @keyframes HeadingContent {
  0% {내용 : '기본 색상'}
  30% {내용 : '빨간 전원'}
  60% {내용 : 'Blue Calm'}
  90%, 100% {컨텐츠 : 'Yellow Joy'}}
}

이제 스크롤 할 때 업데이트되는 끈적 끈적한 제목이있는 사이트가 있습니다.

그러나 잠깐만, 지금 당장은 즉시 전환합니다. 애니메이션은 어디에 있습니까?! 여기가 흥미로워지는 곳이 있습니다. 우리는 JavaScript 또는 String 조작을 사용하지 않기 때문에 키 프레임을 스스로 작성해야합니다. 가장 좋은 방법은 도달하려는 대상 제목에서 시작하여 뒤로 구축하는 것입니다. 따라서 첫 번째 제목과 두 번째 제목 사이의 애니메이션을 원한다면 다음과 같습니다.

 @keyframes HeadingContent {
  0% {내용 : '기본 색상'}
  
  9% {내용 : '기본 색상'}
  10% {내용 : '1 차 콜로'}
  11% {내용 : '1 차 col'}
  12% {내용 : '1 차 CO'}
  13% {내용 : '1 차 C'}
  14% {내용 : '기본'}
  15% {내용 : '기본'}
  16% {내용 : 'Primar'}
  17% {내용 : 'prima'}
  18% {content : 'prim'}
  19% {내용 : 'pri'}
  20% {내용 : 'pr'}
  21% {내용 : 'P'}
  
  22% {내용 : 'r'}
  23% {내용 : 're'}
  24% {내용 : '빨간색'}
  25% {내용 : '빨간색'}
  26% {내용 : 'Red P'}
  27% {내용 : 'Red Po'}
  28%{내용 : 'Red Pow'}
  29% {내용 : 'Red Powe'}
  
  30% {내용 : '빨간 전원'}
  60% {내용 : 'Blue Calm'}
  90%, 100% {컨텐츠 : 'Yellow Joy'}}
}

필요에 따라 편지를 제거하거나 추가 할 때마다 단순히 1% 씩 돌아갔습니다. 다른 경우에는 항상 1%가 아니라 다른 단계 크기를 사용하고 싶을 수도 있습니다. 예를 들어, 더 많은 단어가있는 더 긴 제목에서는 작은 단계를 원할 것입니다.

다른 모든 제목에 대해이 프로세스를 반복하면 완전히 애니메이션 헤딩으로 끝납니다.

사용자 선호도

우리는 접근성에 대해 이야기하고 콘텐츠가 보조 기술과 잘 어울리는지 확인했지만 명심해야 할 것이 하나 더 있습니다. 이런 종류의 애니메이션에 대한 엄격한 WCAG 요구 사항은 아니지만 전정 민감성을 가진 사람들에게 큰 차이를 만들 수 있으므로 애니메이션없이 콘텐츠를 보여줄 수있는 방법을 제공하는 것이 좋습니다.

애니메이션되지 않은 대안을 제공하려면 @Supports 블록을 선호하는 감소 모션 쿼리로 랩핑하기 만하면됩니다.

 @Media 화면 및 (선호-감소 모션 : 예비 회의) {
  @Supports (Animation-timeline : scroll ()) {
    /* 스타일 */
  }
}

레벨 업

변형에 대해 이야기합시다. 이전 예에서는 전체 제목 텍스트를 애니메이션했지만 그렇게 할 필요는 없습니다. 원하는 부분을 애니메이션하고 추가 애니메이션을 사용하여 효과를 향상시키고 더 흥미로운 일을 할 수 있습니다. 예를 들어, 여기서 텍스트 "1 차 색상"을 고정시키고 애니메이션 텍스트를 처리하는 스팬을 추가했습니다.

<h1 aria-hidden="true">
  원색<span></span>
</h1>

그리고 이제 별도의 범위를 가지고 있기 때문에 각 값과 일치하도록 색상을 애니메이션 할 수도 있습니다.

다음 예에서는 텍스트 애니메이션을 스팬에 보관했지만 텍스트 색상을 변경하는 대신 배경색을 변경하기 위해 제목에 다른 스크롤 구동 애니메이션을 추가했습니다. 이렇게하면 원하는만큼 많은 애니메이션을 추가하고 원하는대로 변경할 수 있습니다.

당신의 차례!

CSS 스크롤 구동 애니메이션은 단순한 트릭이 아닙니다. 그들은 완전히 새로운 웹 디자인 세계의 문을 열어주는 게임 체인저입니다. 약간의 창의성만으로 가장 평범한 페이지를 대화식, 기억에 남으며 진정으로 매력적으로 바꿀 수 있습니다. 사용자 경험을 향상시키는 미묘한 효과에서 사이트를 돋보이게하는 야생의 애니메이션 전환에 이르기까지 가능성은 실제로 끝이 없습니다.

그렇다면 스크롤 구동 애니메이션으로 무엇을 구축 하시겠습니까? 이 새로운 초강대국으로 무엇을 창조 하시겠습니까? 그것을 시도하고, 실험하고, 당신이 멋진 것을 생각해 내고, 아이디어, 거친 실험 또는 이상한 실패를 가지고 있다면, 나는 그들에 대해 듣고 싶습니다. 나는 항상 다른 사람들이 무엇을 생각 해내는지보고 기뻐하므로 아래에서 귀하의 작업, 질문 또는 피드백을 자유롭게 공유하십시오.

예제를 검토하고, 모든 것이 접근 할 수 있는지 확인하고 귀중한 조언과 개선을 제공 한 Cristian Díaz에게 특별한 감사를드립니다.

위 내용은 스크롤 구동 끈적 끈적한 제목의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!