단일 요소 로더: 3D로 전환!

이 네 번째이자 마지막 기사에서는 단일 요소 로더에 대한 작은 시리즈, 우리는 3D 패턴을 탐구할 것입니다. 3D 요소를 생성할 때 하나의 HTML 요소만으로 큐브의 XNUMX개 면을 모두 시뮬레이션할 수 있다고 상상하기 어렵습니다. 하지만 어쩌면 우리는 더 많은 큐브로 벗어날 수 있습니다.처럼 대신 모양의 앞면 세 면만 표시하여 — 완전히 가능하며 그것이 우리가 함께 할 일입니다.

스플릿 큐브 로더

다음은 큐브가 두 부분으로 분할되지만 단일 요소로만 만들어진 3D 로더입니다.

큐브의 각 절반은 의사 요소를 사용하여 만들어집니다.

멋지죠?! CSS로 원뿔형 그라디언트를 사용할 수 있습니다. clip-path 요소에 ::before 와 ::after 의사는 3D 큐브의 세 개의 보이는 면을 시뮬레이션합니다. 음수 마진은 두 개의 유사를 함께 끌어서 전체 큐브를 겹치고 시뮬레이션하는 것입니다. 나머지 작업은 대부분 깔끔한 모양의 로더를 얻기 위해 두 반쪽을 애니메이션하는 것입니다!

이 큐브와 같은 요소를 만드는 데 사용되는 클립 경로 포인트 뒤에 있는 수학을 설명하는 시각적 개체를 확인해 보겠습니다.

변수와 방정식이 있으므로 작동하도록 합시다. 먼저 변수를 설정하고 기본 크기를 설정합니다. .loader 요소:

.loader { --s: 150px; /* control the size */ --_d: calc(0.353 * var(--s)); /* 0.353 = sin(45deg)/2 */ width: calc(var(--s) + var(--_d)); aspect-ratio: 1; display: flex;
}

지금까지 너무 미친 것은 없습니다. 우리는 150px 유연한 컨테이너로 설정된 사각형입니다. 이제 의사를 설정합니다.

.loader::before,
.loader::after { content: ""; flex: 1;
}

그것들은 두 개의 반쪽이다. .loader 컨테이너. 우리는 그것들을 칠해야합니다. 그래서 그것이 우리의 원추형 그라디언트 시작 :

.loader::before,
.loader::after { content: ""; flex: 1; background: conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d), #fff 135deg, #666 0 270deg, #aaa 0);
}

그라데이션은 있지만 이상해 보인다. 우리는 요소에 클립:

.loader::before,
.loader::after { content: ""; flex: 1; background: conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d), #fff 135deg, #666 0 270deg, #aaa 0); clip-path: polygon(var(--_d) 0, 100% 0, 100% calc(100% - var(--_d)), calc(100% - var(--_d)) 100%, 0 100%, 0 var(--_d));
}

두 개의 반쪽이 마이너스 마진:

.loader::before { margin-right: calc(var(--_d) / -2);
} .loader::after { margin-left: calc(var(--_d) / -2);
}

이제 움직이도록 합시다!

.loader::before,
.loader::after { /* same as before */ animation: load 1.5s infinite cubic-bezier(0, .5, .5, 1.8) alternate;
} .loader::after { /* same as before */ animation-delay: -.75s
} @keyframes load{ 0%, 40% { transform: translateY(calc(var(--s) / -4)) } 60%, 100% { transform: translateY(calc(var(--s) / 4)) }
}

다음은 다시 한 번 최종 데모입니다.

진행 큐브 로더

동일한 기술을 사용하여 3D 진행률 로더를 생성해 보겠습니다. 예, 여전히 하나의 요소입니다!

로더의 높이와 종횡비를 변경하는 것 외에는 이전과 같은 방식으로 큐브를 시뮬레이션하는 한 변경하지 않습니다. 우리가 만들고 있는 애니메이션은 왼쪽의 너비를 업데이트하고 오른쪽이 나머지 공간을 채우는 놀랍도록 쉬운 기술에 의존합니다. flex-grow: 1.

첫 번째 단계는 다음을 사용하여 오른쪽에 약간의 투명도를 추가하는 것입니다. opacity:

이것은 큐브의 한 면이 채워지고 다른 면이 비어 있는 효과를 시뮬레이션합니다. 그런 다음 왼쪽의 색상을 업데이트합니다. 이를 위해 원뿔형 그라디언트 내부의 세 가지 색상을 업데이트하거나 배경색을 추가하여 업데이트합니다. background-blend-mode:

.loader::before { background-color: #CC333F; /* control the color here */ background-blend-mode: multiply;
}

이 트릭을 사용하면 색상을 한 번만 업데이트할 수 있습니다. 로더의 오른쪽은 원추형 그라디언트의 세 가지 흰색 음영과 혼합되어 하나의 색상 값만 사용하더라도 색상의 세 가지 새로운 음영을 만듭니다. 컬러 속임수!

로더의 왼쪽 너비에 애니메이션을 적용해 보겠습니다.

앗, 애니메이션이 처음부터 조금 이상합니다! 큐브 외부에서 어떻게 시작하는지 알 수 있습니까? 애니메이션을 시작하기 때문입니다. 0% 너비. 그러나 때문에 clip-path 우리가 사용하고 있는 음수 마진, 대신 해야 할 일은 --_d 우리가 정의하는 데 사용한 변수 clip-path 포인트 및 마이너스 마진:

@keyframes load { 0%, 5% {width: var(--_d); } 95%, 100% {width: 100%; }
}

그게 조금 더 낫습니다.

하지만 이 애니메이션을 더 부드럽게 만들 수 있습니다. 우리가 뭔가를 놓치고 있다는 사실을 눈치채셨나요? 마지막 데모와 마지막 데모의 모습을 비교하기 위해 스크린샷을 보여드리겠습니다.

큐브의 바닥면입니다! 두 번째 요소는 투명하기 때문에 왼쪽 예제에서 볼 수 있듯이 해당 직사각형의 바닥면을 볼 필요가 있습니다. 미묘하지만 거기에 있어야합니다!

메인 요소에 그라디언트를 추가하고 유사에서 했던 것처럼 클리핑할 수 있습니다.

background: linear-gradient(#fff1 0 0) bottom / 100% var(--_d) no-repeat;

다음은 모든 것이 결합된 후의 전체 코드입니다.

.loader { --s: 100px; /* control the size */ --_d: calc(0.353*var(--s)); /* 0.353 = sin(45deg) / 2 */ height: var(--s); aspect-ratio: 3; display: flex; background: linear-gradient(#fff1 0 0) bottom / 100% var(--_d) no-repeat; clip-path: polygon(var(--_d) 0, 100% 0, 100% calc(100% - var(--_d)), calc(100% - var(--_d)) 100%, 0 100%, 0 var(--_d));
}
.loader::before,
.loader::after { content: ""; clip-path: inherit; background: conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d), #fff 135deg, #666 0 270deg, #aaa 0);
}
.loader::before { background-color: #CC333F; /* control the color here */ background-blend-mode: multiply; margin-right: calc(var(--_d) / -2); animation: load 2.5s infinite linear;
}
.loader:after { flex: 1; margin-left: calc(var(--_d) / -2); opacity: 0.4;
} @keyframes load { 0%, 5% { width: var(--_d); } 95%, 100% { width: 100%; }
}

그게 다야! 우리는 의사 요소, 원뿔형 그라디언트, 클리핑, 배경 혼합 및 음수 여백을 사용하여 하나가 아닌 영리한 기술을 사용했습니다. 두 마크업에 단일 요소만 포함된 보기 좋은 3D 로더입니다.

더 많은 3D

더 나아가 하나의 요소를 사용하여 무한한 수의 3D 큐브를 시뮬레이션할 수 있습니다. 예, 가능합니다! 다음은 큐브 그리드입니다.

이 데모 및 다음 데모는 작성 당시 Safari에서 지원되지 않습니다.

미쳤지? 이제 우리는 단일 요소를 사용하여 만든 큐브의 반복 패턴을 만들고 있습니다... 그리고 유사도 없습니다! 나는 우리가 사용하는 수학에 대해 자세히 설명하지 않겠지만(여기에 매우 구체적인 숫자가 있음) 여기까지 온 방법을 시각화하는 그림이 있습니다.

우리는 먼저 사용 conic-gradient 반복되는 큐브 패턴을 생성합니다. 패턴의 반복은 세 가지 변수에 의해 제어됩니다.

• --size: 이름 그대로 각 큐브의 크기를 제어합니다.
• --m: 컬럼의 개수를 나타냅니다.
• --n: 행의 수입니다.
• --gap: 이것은 큐브 사이의 간격 또는 거리입니다.

.cube { --size: 40px; --m: 4; --n: 5; --gap :10px; aspect-ratio: var(--m) / var(--n); width: calc(var(--m) * (1.353 * var(--size) + var(--gap))); background: conic-gradient(from -90deg at var(--size) calc(0.353 * var(--size)), #249FAB 135deg, #81C5A3 0 270deg, #26609D 0) /* update the colors here */ 0 0 / calc(100% / var(--m)) calc(100% / var(--n));
}

그런 다음 동일한 크기의 다른 패턴을 사용하여 마스크 레이어를 적용합니다. 이것이 이 아이디어의 가장 까다로운 부분입니다. 의 조합을 사용하여 linear-gradient 및 conic-gradient 큐브 모양만 보이게 하기 위해 요소의 일부를 잘라낼 것입니다.

.cube { /* etc. */ mask: linear-gradient(to bottom right, #0000 calc(0.25 * var(--size)), #000 0 calc(100% - calc(0.25 * var(--size)) - 1.414 * var(--gap)), #0000 0), conic-gradient(from -90deg at right var(--gap) bottom var(--gap), #000 90deg, #0000 0); mask-size: calc(100% / var(--m)) calc(100% / var(--n)); mask-composite: intersect;
}

코드가 약간 복잡해 보일 수 있지만 CSS 변수 덕분에 큐브 매트릭스를 제어하기 위해 몇 가지 값을 업데이트하기만 하면 됩니다. 10⨉10 그리드가 필요하십니까? 업데이트 --m 와 --n 변수 10. 큐브 사이의 더 넓은 간격이 필요하십니까? 업데이트 --gap 값. 색상 값은 한 번만 사용되므로 새 색상 팔레트에 맞게 업데이트하십시오!

이제 또 다른 3D 기술이 있으므로 이를 사용하여 다양한 애니메이션을 가지고 놀면서 로더의 변형을 만들어 보겠습니다. 예를 들어 왼쪽에서 오른쪽으로 무한히 미끄러지는 큐브의 반복 패턴은 어떻습니까?

이 로더는 단일 행에 XNUMX개의 큐브를 정의합니다. 즉 우리의 --n 가치는 4 와 --m 동일하다 1 . 즉, 우리는 더 이상 이것들이 필요하지 않습니다!

대신, 우리는 --size 와 --gap 그리드 컨테이너의 변수:

.loader { --size: 70px; --gap: 15px; width: calc(3 * (1.353 * var(--size) + var(--gap))); display: grid; aspect-ratio: 3;
}

이것은 우리의 컨테이너입니다. 우리는 XNUMX개의 큐브를 가지고 있지만 한 번에 XNUMX개의 큐브만 컨테이너에 표시하기를 원하므로 하나가 미끄러져 나올 때 항상 하나가 들어옵니다. 그렇기 때문에 너비를 다음과 같이 계산합니다. 3 가로 세로 비율을 다음으로 설정하십시오. 3 뿐만 아니라.

큐브 패턴이 XNUMX개의 큐브 너비로 설정되었는지 확인합니다. 컨테이너에서 이 작업을 수행합니다. ::before 유사 요소:

.loader::before { content: ""; width: calc(4 * 100% / 3); /* Code to create four cubes */
}

이제 XNUMX개의 큐브 컨테이너에 XNUMX개의 큐브가 있으므로 마지막 XNUMX개의 큐브를 표시하여 오버플로하도록 큐브 패턴을 그리드 컨테이너의 끝까지 정당화할 수 있습니다.

.loader { /* same as before */ justify-content: end;
}

다음은 그리드 컨테이너의 경계를 표시하는 빨간색 윤곽선과 함께 지금까지 얻은 것입니다.

이제 애니메이션을 추가하여 의사 요소를 오른쪽으로 이동하기만 하면 됩니다.

@keyframes load { to { transform: translate(calc(100% / 4)); }
}

애니메이션의 트릭을 얻었습니까? 넘쳐나는 큐브 패턴을 숨기고 시작과 끝을 나타내는 페이딩 효과를 만들기 위해 마스킹을 추가하여 이 작업을 마무리하겠습니다.

.loader { --size: 70px; --gap: 15px; width: calc(3*(1.353*var(--s) + var(--g))); display: grid; justify-items: end; aspect-ratio: 3; overflow: hidden; mask: linear-gradient(90deg, #0000, #000 30px calc(100% - 30px), #0000);
}

변수를 도입하여 훨씬 더 유연하게 만들 수 있습니다. --n, 컨테이너에 한 번에 표시할 큐브 수를 설정합니다. 그리고 패턴의 총 큐브 수는 --n, 우리는 다음과 같이 표현할 수 있습니다. calc(var(--n) + 1).

전체 내용은 다음과 같습니다.

좋아요, 비슷하지만 큐브가 슬라이딩 대신 연속적으로 색상을 변경하는 3D 로더가 하나 더 있습니다.

우리는 애니메이션 배경에 의존할 것입니다. background-blend-mode 이것에 대해 :

.loader { /* ... */ background: linear-gradient(#ff1818 0 0) 0% / calc(100% / 3) 100% no-repeat, /* ... */; background-blend-mode: multiply; /* ... */ animation: load steps(3) 1.5s infinite;
}
@keyframes load { to { background-position: 150%; }
}

마지막 예제와 동일한 레이아웃을 생성하는 데 사용된 불필요한 코드를 제거했지만 3개 대신 XNUMX개의 큐브가 있습니다. 여기에 추가하는 것은 진행률 표시줄 XNUMXD 로더에 대해 이전에 수행한 것처럼 원추형 그라디언트와 혼합되는 특정 색상으로 정의된 그라디언트입니다.

거기에서 배경 그라디언트에 애니메이션을 적용합니다. background-position 큐브가 한 번에 하나씩 색상을 깜박이도록 하는 XNUMX단계 애니메이션으로.

내가 사용하는 값에 익숙하지 않은 경우 background-position 배경 구문을 사용하는 것이 좋습니다. 내 이전 기사 중 하나 중 하나가 내 스택 오버플로 답변. 거기에서 아주 자세한 설명을 찾을 수 있습니다.

큐브 수를 업데이트하여 변수로 만들 수 있습니까?

네, 있어요 그에 대한 해결책, 하지만 여기에 포함시키는 것보다 조금 더 파고들었으면 합니다. 이전 예제에서 배운 것을 가지고 이 예제에서 동일한 작업을 시도한 다음 의견에서 작업을 공유하십시오!

다양한 변형!

이 시리즈의 다른 세 기사와 마찬가지로 저는 여러분에게 영감을 주어 자신만의 로더를 만들고 싶습니다. 다음은 함께 만든 3D 로더와 상상력을 발휘할 수 있는 몇 가지 다른 로더가 포함된 컬렉션입니다.

그게 끝이야

지난 몇 주 동안 나와 함께 단일 요소 로더를 만드는 데 즐거운 시간을 보내셨기를 바랍니다. 우리가 겉보기에 단순한 스피너로 시작한 다음 점차적으로 마크업에서 단일 요소만 사용하는 3D 기술까지 스스로 작업할 수 있도록 새로운 조각을 추가했다는 것은 정말 미친 짓입니다. 확장 가능하고 유연하며 재사용할 수 있는 CSS의 능력을 활용할 때 CSS가 어떻게 생겼는지 알 수 있습니다.

이 작은 시리즈를 읽어주셔서 다시 한 번 감사드립니다! 내가 가지고 있음을 상기시켜 드리겠습니다. 500개 이상의 로더 컬렉션 더 많은 아이디어와 영감을 찾고 있다면

---

단일 요소 로더: 3D로 전환! 원래에 게시 CSS 트릭. 너는해야한다. 뉴스레터 받기.

• 코인스마트. 유럽 ​​최고의 비트코인 ​​및 암호화폐 거래소.
• 플라토 블록체인. Web3 메타버스 인텔리전스. 지식 증폭. 무료 액세스.
• 크립토호크. 알트코인 레이더. 무료 시험판.
• 출처: https://css-tricks.com/single-element-loaders-going-3d/