CSS 다각형 시작하기

오랫동안 웹 사이트를 형성하는 직사각형 블록과 원의 기본 구조는 디자이너와 크리에이티브 개발자 모두를 괴롭 혔습니다. 그래서 CSS clip-path 폴리곤이 WebKit 브라우저에서 장면에 등장했을 때 저는 즉시 흥분으로 불타고있었습니다.

주로 텍스트를 감싸고 콘텐츠를 마스크하는 데 사용되는이 속성은 디자이너에게 캔버스 나 SVG 없이도 순수한 CSS로 더 흥미로운 모양을 만들 수있는 기회를 제공합니다. 나는 그것이 내가 디자인하고 개발하는 방식을 바꿀 수 있다고 느꼈고, 그 결과는 오래 걸리지 않을 것입니다.



Clip-path의 주요 목적은 영역 (이미지뿐만 아니라 실제 콘텐츠)을 마스킹하는 것이지만이 자습서에서는 다각형 속성으로 수행 할 수있는 작업에 대해 구체적으로 살펴 보겠습니다. Sass for-loops를 사용하여 전면적 인 전환 효과를 만들고 CSS 다각형 모음에 생명을 불어 넣는 방법을 설명하겠습니다.

div 집합 만들기

7 개의 삼각형 다각형이 각각 중앙 지점에서 애니메이션되는 팬 효과를 만들고 있습니다.

7 개의 삼각형 다각형이 각각 중앙 지점에서 애니메이션되는 팬 효과를 만들고 있습니다.

우리가 목표로하는 것은 일련의 삼각형 모양이 중앙 지점에서 펼쳐지는 효과입니다. 이 튜토리얼의 Codepen ). 먼저 필요한만큼 다각형에 대한 div를 만들고 (여기서는 7 개를 사용합니다) 서로 위에 배치해야합니다.

.polygon-wrap { div { position: absolute; width: 500px; height: 275px; top: 0; left: 0; } }

다각형의 첫 번째 상태 만들기

팬이 가운데에서 바깥쪽으로 자라도록 다각형을 전환 할 것입니다. 이를 위해 먼저 다각형의 원래 상태를 정의해야합니다. 생성 한 모양 내에서 자동으로 가려지는 배경색을 추가합니다.

.polygon-wrap { div { -webkit-clip-path: polygon(50% 95%, 50% 95%, 50% 95%); background-color: #46008C; } }

애니메이션 트리거

전환이 발생하려면 이동 트리거가 필요합니다. 여기서는 단순히 래퍼 요소에 호버 상태를 배치합니다.

.polygon-wrap:hover { }

다각형 만들기

오히려 유쾌하게 CSS 폴리곤은 단 한 줄의 코드로 생성됩니다. 다각형은 원하는 모든 형태를 취할 수 있습니다. 다각형은 점이나 측면에 제한되지 않습니다. 그러나 여기에있는 것처럼 모양을 전환하는 경우 동일한 수의 점을 사용하고 배열 내에서 동일한 점을 사용하여 각 다음 점에 애니메이션을 적용해야합니다.

..polygon-wrap:hover { div:nth-child(1) { -webkit-clip-path: polygon(19% 42%, 26% 32%, 50% 95%); } }

이 다각형은 일곱 부분으로 된 팬의 왼쪽을 형성하는 삼각형 모양을 취합니다. 백분율 값은 상위 div의 크기에 따라 X 및 Y 좌표에 맞춰집니다.

for 루프를 통한 전환

다각형의 두 번째 상태를 생성 한 후 Sass for 루프를 사용하여 스위프 전환 세트를 생성 할 수 있습니다. 이로 인해 각 div가 이전 버전보다 약간 느리게 애니메이션되어 '혼합'느낌을줍니다. 또한 프로세서가 한 번에 7 가지 작업을 수행하는 것이 아니라 하나씩 수행하므로 성능이 향상됩니다.

.polygon-wrap { div { transition: 0.2s; @for $i from 1 through 7 { &:nth-child(#{$i}) { $tdelay: ((($i*0.1))+0.2s); $tduration: ($i*0.05 + 0.25s); transition-delay($tdelay); transition-duration($tduration); } } } }

이 코드 비트는 본질적으로 각 div의 타이밍 차이를 만듭니다. 초기 버퍼는 전환 '기본'(여기서는 0.2 초)입니다. 다음으로 지연 값 (0.1 초)이 있습니다. 이 값에 div의 순서 번호 (1에서 7까지)를 곱하여 전환 지연을 제공합니다.

조각으로

조각으로

조각으로

개인 프로젝트에서 조각으로 , 저는이 동일한 다각형 속성을 사용하여 각각 30 개의 삼각형 '조각'으로 구성된 30 개의 서로 다른 멸종 위기에 처한 동물의 이미지를 만들었습니다. 저는 기본 CSS 전환을 사용하여 동물에서 동물로 화면을 휩쓸며 혼합했습니다. 동물들은 서로 변신하는 것 같습니다. 이 튜토리얼에서 설명하는 전환 지연을 사용하여 만든 효과입니다.

In Pieces에서는 무브먼트가 순차적으로 생성됩니다. div 요소에는 자식 인덱스 정수가 제공되며,이 정수에 특정 값을 곱하여 지연 시간을 제공합니다. 30 개의 개별 다각형을 포함하기 위해 30 개의 div 요소를 사용했습니다. 그런 다음 0.1 초의 전환 지연을 도입하여 1 초 (0.1 x 10) 후에 애니메이션 된 10 번째 다각형과 3 초 (0.1 x 30) 후에 30 번째 다각형이 전환되었습니다.

ipad air 2를위한 사과 연필

쉬머 효과

이러한 지연은 동물에게 '쉬머'를 만드는데도 사용되었으며 몇 초마다 볼 수 있습니다. 일련의 지연은 모든 요소에 대한 간단한 불투명도 스위치를 허용하여 유리에 빛이 미치는 효과와 유사한 광채를 만듭니다. 이것은 매우 구체적인 예이며 이러한 지연의 사용은 CSS 다각형에만 국한되지 않습니다.

이러한 지연이 특히 달성하는 것은 훨씬 더 자연스러운 느낌의 애니메이션을 만드는 움직임에 대한 유동성 요소입니다. 미묘하지만 매우 보람있는 터치입니다. 이 블렌딩이 없으면 폴리곤 세트가 다른 것으로 바뀌면 눈에 매우 가혹할 수 있습니다. 동시에 발생하는 움직임이 적기 때문에 성능이 향상됩니다.

결론

거기 있습니다! 이것은 다각형으로 연속적인 움직임을 생성하는 좋은 방법입니다. CSS 다각형으로 탐색 할 수있는 흥미 진진한 창의적인 가능성이 많이 있으므로 이러한 모양으로 무엇을 할 수 있는지 살펴보세요.

: 브라이언 제임스

Bryan James는 프리랜서 디자이너이자 크리에이티브 코더입니다. 조각으로 . 이 기사는 원래 272 호에 게시되었습니다. 넷 매거진 .

마음에 드 셨나요? 읽어보세요!