웹 디자인에서 파티클 애니메이션의 10가지 아름다운 예

웹을 폭풍으로 몰아넣은 파티클 애니메이션은 몇 년 전에 스스로를 위한 틈새 시장을 개척했습니다. 하이테크 분위기와 기하학적 장식이 있는 디자인에 대한 현재의 엄청난 집착으로 인해 오늘날 가장 인기 있는 솔루션 중 하나가 되었습니다.

일반적으로 파티클 애니메이션은 JetUp Digital과 같은 영웅 섹션에서 볼 수 있습니다.

보시다시피, 웹 사이트를 군중과 섬세하고 눈에 띄지 않게 분리하면서 첫인상에 특정 향신료를 추가하는 우아한 방법입니다.

이 효과를 재현하려면 첫 번째 단계는particles.js여야 합니다.

그것은 대부분의 파티클 애니메이션의 핵심이자 영혼인 Vincent Garreau의 경량 플러그인입니다. 게다가 원래 상태에서는 웹에서 가장 많이 복사된 솔루션 중 하나입니다. 하지만 저자의 예와 같이 강도가 높지는 않을 수도 있습니다.

일반적으로 개발자는 더 깔끔하고 겸손하며 차분한 변형을 선호합니다. 예를 들어 Romswell Roswell Parian Paucar의 Canvas Particles를 확인하십시오. 파티클과 시차의 조합으로 매력적이고 역동적인 미학이 만들어집니다.

그러나 접근 방식이 이러한 실현에만 국한되는 것은 아닙니다. Dean Wagman의 Particles in space, Robin Selmer의 CSS 전용 파티클 시스템, 물론 Alex Safayan의 코드펜에서 능숙하게 재현되고 특징인 밀어내기 효과를 고려하십시오. Robin Selmer의 개념은 보기에 좋은 작품일 뿐입니다. 다른 두 가지는 사용자의 상호 작용이 필요하며 항상 흥미진진합니다.

인상적인 파티클 애니메이션 사용

시간이 지날수록 기술이 발전했습니다. 캔버스 전체에 흩어져 있는 작은 흰색 점들의 혼란스러운 혼란에서 커다란 잠재력을 지닌 도구로 탈바꿈했다. 그것은 특별한 것이 아니지만 특정 와우 요소가 있습니다. 또한 하이테크, 기하학적, 비즈니스 같은 미학에 완벽하게 기여하여 자연스럽게 마무리됩니다.

전제는 입자 애니메이션이 인상적이어야 한다는 것입니다. 그리고 개발자들은 이 가정에 충실하여 최대한 활용합니다. 이 솔루션의 진정한 팬이 만든 몇 가지 놀라운 코드 조각을 살펴보겠습니다.

Justin Windle의 30,000개의 입자

여기에서 제목 자체가 말해줍니다. 30,000개의 입자가 탑재되어 있어 엄청난 것을 기대하게 됩니다. 그리고 Justin Windle은 확실히 우리의 기대에 부응했습니다. 그의 개념은 놀랍습니다. 마우스를 사용하여 놀아보세요. 물리학은 예외적입니다. 이 버전의 입자 애니메이션은 그렇게 기념비적인 규모는 아니지만 개발자들 사이에서 꽤 인기가 있습니다.

Alex Safayan의 물 속의 물고기

Alex Safayan은 거의 동일한 솔루션을 내놓았지만 이 경우 입자가 점점 커집니다. 또한 마우스 커서는 점을 밀어내어 미묘한 파급 효과가 있는 자취를 형성합니다. 애니메이션의 동작은 수면에 가까울 때 물고기의 움직임을 연상시킵니다. 물리학에 주목하십시오. 점 사이의 상호 작용은 잘 고려된 것입니다.

PLANKTON – Marco Dell'Anna의 입자 생활

2017년 가장 마음에 든 프로젝트로 상을 받은 플랑크톤은 확실히 주목할 만합니다. 이 프로젝트는 아이디어뿐만 아니라 실현으로도 마음을 사로잡습니다. 여기에 장갑처럼 꼭 맞는 미묘한 색상부터 믿을 수 없을 정도로 자연스러워 보이는 장엄한 행동에 이르기까지 Marco Dell'Anna는 세부 사항에 대한 안목이 있습니다.

마르코 델아나의 STARDUST

나는 이곳의 웅장한 복고풍 분위기, 네온 터치 및 화려한 색상을 좋아합니다. 눈을 떼기가 너무 어렵습니다. Stardust는 영감을 주는 걸작을 만드는 디자인과 코딩의 공생입니다.

하마무로 아키미츠의 그래비티 포인트

Akimitsu Hamamuro는 자신의 놀이터에 소위 "중력점"을 추가하도록 초대합니다. 그것들은 점들의 혼란스러운 움직임에 끼어들어 자석처럼 끌어당긴다. 궤도의 중심 역할을 하지는 않지만; 그러나 그들은 입자가 방향으로 움직이도록 하는 초점을 형성합니다.

Nate Wiley의 Particle Orb CSS

구체는 요즘 영웅 영역에서 상당히 인기 있는 스타일 선택입니다. 그리고 이러한 경향에 대한 Nate Willey의 태도는 매우 인상적입니다. 구는 작은 입자로 인해 연약해 보이지만 동시에 신중한 행동 덕분에 단단해 보입니다. 구체를 분해하고 재형성하는 그의 루틴은 환상적입니다.

케빈 라자람의 파티클 웨이브

Kevin Rajam은 파티클 애니메이션의 아름다움과 우아함을 Three.js의 탁월함으로 강화하여 섬세하면서도 진정으로 정교한 개념을 구현했습니다. 파도의 놀라운 전망은 미래적이고 인공적이며 매혹적입니다.

비정통적 용도

입자 애니메이션을 사용하는 훨씬 더 인상적인 방법이 있습니다. 익숙한 길에서 벗어나 기본적으로 생각해보자. 접근 방식은 로고 유형 및 글자와 같은 요소에 쉽게 도움이 될 수 있습니다.

Tamino Martinius의 인터랙티브 파티클 로고

Interactive Particle Logo가 그 대표적인 예입니다. 위에 소개된 Justin Windle의 스니펫을 재구성한 솔루션처럼 보입니다. 30,000개의 점은 아니지만 "CODEPEN"이라는 단어를 능숙하게 형성하는 인상적인 수의 입자로 구성되어 있습니다. 이것은 개념이 실용적인 용도를 찾은 경우 중 하나입니다.

Louis Hoebregts의 텍스트를 입자로

이전 솔루션의 다채로운 버전은 Louis Hoebregts의 이 펜에서 사용할 수 있습니다. 여기에서 텍스트는 이전 예와 동일한 상호 작용으로 강화된 수천 개의 다채로운 솔리드 원으로 형성됩니다.

입자는 Marco Dell'Anna의 텍스트를 작성합니다.

드라마틱한 입구는 아니지만 묘한 매력이 있다. 부드러운 애니메이션은 천천히 캐릭터를 밝혀내고 우리의 관심을 불러일으킵니다. 이 개념은 "기묘한 이야기" 인트로와 유사한 신비한 감각을 가지고 있습니다.

Marco Dell'Anna의 JUST DO IT

이것은 Marco Dell'Anna의 또 다른 걸작입니다. 이번에는 입자 애니메이션이 유명한 Nike 로고를 형성하는 데 참여합니다. 모호하고 반투명한 것부터 선명하고 단단한 것까지 애니메이션은 점차적으로 로고를 노출시켜 눈에 거슬리지 않게 전반적인 관심을 사로잡습니다.

엔리코 토니아토의 404 입자 텍스트

입자 애니메이션의 유일한 실용적인 사용은 영웅 섹션을 풍부하게 하는 것이라고 생각한다면 Enrico Toniato가 당신이 틀렸음을 증명할 것입니다. 오류 페이지에 대한 그의 견해는 훌륭합니다. 그의 아이디어를 따르고 움직이는 입자를 사용하여 404 페이지가 지루하고 혐오스러워 보이지 않도록 저장하십시오.

주의를 끄는 효과

입자 애니메이션은 작을수록 좋은 경우 중 하나입니다. 도트가 작을수록 얻을 수 있는 효과가 더 인상적입니다. 한편으로는 기하학과 물리학이 관련되어 있기 때문에 정교하고 복잡해 보입니다. 반면에 섬세한 모양 덕분에 연약하고 미묘해 보입니다. 이 독특한 퓨전은 파티클 애니메이션을 탁월하고 시선을 사로잡도록 만듭니다.