얼마 전 나는 Michael Crawford 가 자신이 고안한 프로젝트인 Adult Protection Agency 중 하나를 위해 촬영한 이 멋진 드리블을 우연히 발견했습니다 . 이는 성장의 예술이 끊임없이 발전하는 세상에서 멸종 위기에 처한 기술이 되고 있음을 유쾌하게 일깨워줍니다 ???? 지뢰 찾기 게임 개념의 놀라운 통합 덕분에 "픽셀" 상자에서 형성되는 도구 설명을 만드는 작은 아이디어가 생겼습니다. 그래서 저는 사이버펑크에서 영감을 받은 제가 가장 좋아하는 UI 테마 방향을 잡고 "픽셀"이 나타나는 방식에 대해 다양한 애니메이션을 사용하여 이 작은 프로토타입을 만들었습니다. 픽셀은 클래식 div로 구성됩니다. 행과 열은 CSS 변수로 설정되며 필요한 양의 요소가 즉시 생성됩니다. 레이아웃은 그리드 기반이며 변수를 사용하여 그리드 템플릿을 설정합니다. 나머지는 픽셀 상자가 애니메이션되는 방식을 다루는 GSAP 마법입니다. 여기에는 가능성이 많습니다. 픽셀이 한쪽 모서리나 중앙에서 나타나도록 할 수도 있고, 유기적인 트위스트를 위해 끈끈한 필터를 적용할 수도 있습니다! 행과 열의 양에 따라 독특한 효과를 얻을 수도 있습니다. 예를 들어 행 하나만 사용하면 "슬라이스된" 모양이 만들어집니다. 유사한 종류의 기술은 클립 경로를 사용하여 이미지를 분리하는 모션 트레일 애니메이션 의 데모 8 에서도 찾을 수 있습니다 . 데모에서는 Mykl 에서 만든 애니메이션 지구본 과 일부 심각한 결함 동작과 같은 미래 지향적인 UI 세부 정보를 사용했습니다. CSS에서 글리치 애니메이션을 만드는 방법 에 대해 더 알고 싶으시다면 저희가 도와드리겠습니다. 이 기능을 즐기고 다음 단계로 발전시키시기 바랍니다! 논리를 뒤집어서 상자를 사라지게 만드는 쿠키 배너의 모달을 생각해 보세요!