웹 디자인에서 혐오감을 주는 8가지 스니펫

캔버스를 사용한 실험이 요즘 화두입니다. 인기 있는 웹 개발자 놀이터의 개념일 뿐만 아니라 실제 프로젝트를 위한 솔루션으로도 볼 수 있습니다. 다양성은 의심할 여지 없이 놀랍습니다. 인기 있는 플러그인을 기반으로 하는 원시 입자 애니메이션에서 현대적이고 시간이 입증된 도구가 혼합된 독특한 아이디어에 이르기까지 다양합니다.

오늘은 기피효과에 주목합니다. 역겨운 행동을 하면서도 매력이 있는 것은 분명하다. 사용자가 다양한 방향으로 풍경의 세부 사항을 가지고 놀거나 경우에 따라 모든 것을 날려 버리도록 유도하면 즉시 주요 엔터테인먼트가됩니다. 사용자 경험을 즐겁고 흥미롭게 만듭니다.

고유한 추세를 직접 확인할 수 있도록 코드 조각으로 영감을 주는 데모 모음을 살펴보겠습니다.

반발 라인

첫눈에 이 데모는 기타 줄 세트를 연상시킵니다. 커서를 그 위로 이동하면 마법이 나타납니다. 선이 구부러지고 변형되기 시작하여 작은 구를 형성합니다.

오른쪽의 옵션 패널에서 효과를 제어할 수 있습니다. 마우스 범위의 반경을 설정하거나 줄 수를 추가 또는 줄이거나 문자열 사이의 거리를 변경할 수 있습니다. 물리학에 유의하십시오. 그것은 잘 생각되고 신중하게 재생산됩니다.

Daniel Velasquez의 Pen Repeling Lines 참조

30,000개의 입자

반발 효과는 선 대신 수천 개의 점에 적용될 때 단순히 멋지게 보입니다. Justin Windle은 실제로 이것을 증명합니다. CodePen에 대한 그의 상징적이고 매우 인기 있는 프로젝트는 30,000개의 작은 입자가 편안하게 앉아 있는 패널을 특징으로 합니다.

그들은 조밀한 표면을 만들기 위해 함께 단단히 포장됩니다. 그 위에 마우스 커서를 올리면 점이 어떻게 당신에게서 멀어지는지 볼 수 있습니다. 시야에서 사라지지는 않지만 마우스 범위에 의해 억제됩니다. 따라서 점이 테두리를 형성하는 비교적 크고 속이 빈 원을 볼 수 있습니다.

Justin Windle의 펜 30,000 입자 보기

대화형 입자

단순한 직사각형 프레임이 창의력에 영감을 주지 않는다면 Tamino Martinius가 Interactive Particles 프로젝트에서 했던 것처럼 항상 모든 점을 캐릭터로 수집할 수 있습니다.

그의 데모에는 각 글자가 수백 개의 점으로 구성된 단어 하나가 포함되어 있습니다. 당신의 마우스 커서로 그것들을 날려버리세요. 실험의 매개변수를 변경하고 원하는 대로 조정할 수 있는 작은 제어 센터가 있습니다.

Tamino Martinius의 Pen Interactive Particle 로고 보기

텍스트를 입자로

Louis Hoebregts가 Text to Particles 프로젝트에서 했던 것처럼 약간의 생동감 넘치는 비틀기로 이전의 두 개념을 풍부하게 하기 위해 색상과 크기를 사용해 보겠습니다.

Tamino Martinius의 솔루션과 달리 여기에서는 점의 반경과 색상이 다릅니다. 또한 입력을 사용하여 설정하여 텍스트를 변경할 수 있습니다. 마우스 커서는 군중을 분산시키고 놀이터에서 작은 소란을 일으키는 부드럽고 부드러운 동작을 가지고 있습니다. 이것은 진정으로 눈을 즐겁게 하는 데모입니다.

Louis Hoebregts의 입자에 대한 펜 텍스트 보기

공과 중력

기피 효과는 다른 물리학 기반 솔루션과 쉽게 결합되어 뛰어난 결과를 가져올 수 있습니다. 공과 중력을 고려하십시오.

프로젝트 이름이 모든 것을 말해줍니다. 반발 효과뿐만 아니라 중력은 개념의 핵심에 자리 잡고 있어 경험을 흥미롭게 만듭니다.

이전 예와 달리 여기에서는 원을 잡고 다른 원을 밀어내는 도구로 사용해야 합니다. 이 다채로운 납작한 공을 거의 치면 강제로 움직일 수 있습니다. 또한 중력과 싸워야 하므로 경험이 더욱 흥미진진합니다.

Marco Dell'Anna의 Pen BALLS&GRAVITY 보기

어트랙터

Marco Dell'Anna의 이 프로젝트도 중력을 중심으로 구축되었습니다. 마우스 커서로 제어할 수 있습니다. 파티클을 이동하고 위치를 재정렬하는 데 사용합니다.

입자가 위치를 변경하더라도 여전히 원으로 돌아가려고 노력합니다. 따라서 여기에서 자석의 역할을 하는 마우스 커서와 동시에 점을 밀어내는 도구를 볼 수 있습니다(적어도 일시적으로).

Pen Attractor 보기 – Marco Dell'Anna의 MatterJS

활성화

Activate는 Gerard Ferrandez가 만든 뛰어난 펜입니다. 이전 예와 마찬가지로 저자도 중력을 선택했습니다. 이번에는 유체 거동과 물론 반발 효과와 결합됩니다. 결과적으로 프로젝트는 장난기 가득한 모습과 장난기 가득한 성격으로 우리를 유혹합니다.

Gerard Ferrandez의 펜 활성화 보기

모아 플라즈마

반발 효과는 입자 애니메이션에도 많은 도움이 될 수 있습니다. 당신은 그것들을 더욱 스릴있게 만들 수 있습니다. 모아 플라즈마를 살펴보세요.

여기에서 마우스 커서가 모든 입자를 다른 면으로 밀어 겁을 주는 혼란스러운 애니메이션을 볼 수 있습니다. 데모를 즐길 수 있을 뿐만 아니라 상호 작용할 수도 있습니다.

John Chin-Jew의 Pen Moar 플라즈마 보기

눈 입자

Snowy Particles는 전통적인 입자 애니메이션이 향상되는 또 다른 훌륭한 예입니다. 펜의 저자 Nat은 두 가지 트릭을 사용했습니다.

첫째, 마우스 커서는 단순한 점을 눈송이로 변환하는 힘이 있어 장면이 진정으로 마법처럼 느껴지도록 합니다. 둘째, 눈덩이를 조금씩 분산시켜 독특한 눈 조각을 볼 수 있도록 하는 작은 기피 효과가 추가되었습니다. 단순히 환상적입니다.

Nat의 Penparticles.js 눈 보기

리펠러

반발 효과가 이점을 가져오고 둔한 장면을 사치스러운 장면으로 쉽게 변환하는 또 다른 영역은 텍스트 효과입니다. 우리는 이미 천 개의 점으로 만들어진 단어가 어떻게 눈에 띄게 보이는지 보았습니다. 점을 선으로 바꾸고 모든 것을 반발 효과로 장식할 때입니다. 고려하다 경우에 대비하여 리펠러.

이 프로젝트는 기호가 시청자를 향한 짧고 가는 선으로 구성된 단어를 특징으로 합니다. 이런 식으로 체적 특성을 거의 느낄 수 있습니다. 마우스 커서를 잡고 텍스트를 가로질러 드래그하면 선이 춤을 추기 시작하는 방법을 볼 수 있습니다.

텍스트 자체가 약간 날카롭고 날카롭게 느껴지지만 그들의 행동은 부드럽고 눈을 즐겁게 합니다. 게다가 선들도 스스로 움직이기 때문에 구성의 일부를 흔드는 작은 바람이 있는 것처럼 느껴진다. 결과적으로 간단한 텍스트가 쇼를 실행하는 진정한 걸작을 즐길 수 있습니다.

Rein van der Woerd의 Pen Repellers 보기

반발을 통한 매력

반발 효과가 구성의 세부 사항을 밀어내는 데 사용되지만 여전히 완전히 자기적입니다. 눈을 뗄 수 없습니다. 장난기 넘치는 행동으로 즉시 시선을 사로잡고 사용자가 장면과 상호 작용하도록 유도합니다.

기피 효과는 청중을 이기기 위한 투쟁에서 혼자가 아닙니다. 다른 유형의 애니메이션 및 효과와 완벽하게 협력하여 독특하고 시선을 사로잡는 솔루션을 제공합니다.