#CodepenChallenge 100 수평 규칙! 인터랙티브 패턴

설명

이것은 자바스크립트가 없는 픽업 스틱으로, 스틱을 클릭하면 대화 상자가 되고 색상의 16진수 코드가 표시됩니다. 그러나 텍스트가 :after pseudo-element 안에 있기 때문에 텍스트를 복사할 수 없습니다.

6개의 임의의 16진수 코드를 문자열로 설정하여 이 색상을 무작위로 생성한 다음 색상을 이 막대의 background-color로 설정했습니다.

일부 장치에서는 렌더링 및 작업이 느려질 수 있습니다. 특히 창의 크기를 조정할 때. 창 크기를 조정하는 동안 전환할 요소(정확히 100개)가 많기 때문일 수 있습니다. 또한 전환 시간에 cubic-bezier를 사용했는데 이것이 성능 문제의 원인이기도 합니다.

주석을 제외하고 이 펜에는 단일 Javascript 소스 코드가 없습니다. 여기의 모든 상호 작용은 CSS에 의해 이루어집니다. HTML 코드에는 Javascript 코드가 있지만 Pug의 렌더링 논리입니다.

내가 한 방법

우선, 필요한 모든 CSS 변수를 HTML 코드에 넣어 이들의 CSS 속성이 Pug에 의해 동적으로 렌더링되는 "동적"이 되도록 했습니다.

아래는 컴파일된 HTML 코드입니다. (그림 1)

<hr style="--background-color: #aa8ad5; --top: 38.54%; --left: 45.07%; --angle: 161deg; --content: &quot;This color is '#aa8ad5'&quot;;" title="aa8ad5" tabindex="0"/>

아시다시피 background-image , top , left , transition (변수로 "각도"를 사용했습니다), content를 동적 CSS 속성으로 사용했습니다.

CSS 코드에서 이 모든 변수를 속성으로 설정했습니다. (그림 2)

hr {
  background-color: var(--background-color);
  top: var(--top);
  left: calc(var(--left) - 30vmin); /* The main formula to put the element to the center is "50% - (width of element / 2)" if you know the width of the element */
  transform: rotate(var(--angle)); /* I used angle, for easy reading */
}

일반적으로 <ht /> 요소에 집중할 수 없지만 핵심은 tabindex="0" 속성을 넣어야 초점을 맞출 수 있다는 것입니다(그림 1 참조).

이러한 요소를 클릭(포커스)할 때 대화 상자가 되도록 하려면 :focus pseudo-class 을 사용하여 CSS에서 수행했습니다. 그런 다음 요소를 페이지 중앙에 배치합니다.

아래는 포커스를 위한 CSS 코드입니다. (그림 3)

hr:focus {
  width: 50vw;
  height: 50vh;
  top: calc(50% - 25vh); /* This is the same formula as Figure 1 */
  left: calc(50% - 25vw); /* This is the same formula as Figure 1 */
  transform: rotate(0deg); /* Override the transform */
  z-index: 2; /* To place the element above all these sticks */
  box-shadow: 0 2vmin 4vmin rgba(0, 0, 0, 0.5);
}

hr:focus:before {
  content: var(--content); /* Set the content of <hr /> tag by placing on the content property */
}

보시다시피 이전에 설정한 기존 CSS 요소를 재정의했습니다. &lr;hr /> 태그를 대화 상자처럼 보이게 해야 하기 때문입니다.

또한 그림 3에서 볼 수 있듯이 --content 변수를 사용하여 &lr;hr /> 태그의 내용을 설정했습니다. pseudo-element에는 content 속성만 설정할 수 있습니다.

나머지 인용되지 않은 코드는 "해킹"의 일부가 아닙니다. 스타일리쉬함을 더하고 싶어서 추가했어요.

라이브 데모

아래는 Codepen을 사용하여 내장한 라이브 데모입니다.