팔! 웹 디자인에서 폭발 조사하기

청중의 관심을 끄는 방법에는 여러 가지가 있습니다. 현재의 기술 상태가 여전히 불완전함에도 불구하고 우리는 선택의 여지가 없습니다. 우리는 일부 브라우저 호환성 문제를 겪고 있으며 모든 장치가 웹 개발자가 제공하는 모든 장대한 솔루션을 처리할 수 있는 것은 아닙니다.

그럼에도 불구하고 이미지가 주요 원동력이고 화려한 전환이 있는 슬라이더가 유일한 양념이었던 정적 웹사이트의 시대는 지나갔다. 우리는 대담한 아이디어와 화려함의 시대를 목격하고 있습니다.

가장 큰 측면 중 하나는 개발자가 큰 일에 집중하지 않는다는 것입니다. 예, 수많은 캔버스 애니메이션, 전체 화면 모드가 필요한 압도적인 VR 및 비디오 실험 등을 볼 수 있습니다. 그러나 오늘날에는 가장 작은 세부 사항에도 자체적으로 관심을 기울입니다.

웹사이트는 특히 마우스 커서를 기반으로 하는 미세한 솔루션으로 가득 차 있습니다. 우리는 수많은 똑똑한 아이디어를 우연히 발견할 수 있습니다. 그들은 환상적이지만 대부분의 경우 (내가 찾고 있는 단어가 무엇입니까?) "조용한" 상태입니다. 일부 마우스 기반 솔루션이 실제로 소리를 내기 때문에 소리를 내는 것에 대해 말하는 것이 아닙니다. 나는 그들의 행동에 대해 이야기하고 있습니다.

그들의 행동은 부드럽고 차분하며 온화합니다. 어떤 경우에는 너무 매끄럽기 때문에 거의 인식할 수 없습니다. 콘텐츠에 너무 몰두하거나 다른 주의를 산만하게 하는 요소가 있는 경우 간과할 가능성이 있습니다. 그렇다면 사용자가 즐길 수 있는 기회를 놓치지 않도록 소리를 조금 더 크게 만들지 않겠습니까?

이것을 하는 방법, 당신은 물을 수 있습니다. 한 가지 좋은 해결책이 있습니다. 문자 그대로 그리고 비유적으로 폭발을 일으키는 것입니다.

Dean Wagman의 우주의 입자

예를 들어, Dean Wagman이 만든 이 환상적인 코드 조각을 살펴보세요. 딘이 수행한 첫 캔버스 실험이지만 그럼에도 불구하고 매우 고무적이다. 화면의 아무 곳이나 클릭하기만 하면 얼굴을 향해 날아가는 수백 개의 작고 밝은 입자를 볼 수 있습니다. 소리가 나지 않아도 확실히 소란스러운 느낌이 듭니다.

펜 보기
Dean Wagman(@deanwagman)의 우주 속 입자.

폭발 효과는 항상 큰 일이 일어났다는 느낌을 일깨워줍니다. 그래서, 이것을 우리에게 유리하게 사용하고 실제 소리를 내지 않고 약간의 노이즈를 추가하지 않는 이유는 무엇입니까? 더군다나 여기에 환상적인 코드 조각이 있습니다. 함께 살펴보겠습니다.

Aleksei의 입자 폭발 / Christopher Lis의 Kaboomerz

Dean Wagman의 솔루션이 너무 과해 보인다면 언제든지 Aleksei의 파티클 폭발을 시도할 수 있습니다. 또는 반대로 더 중요한 영향을 미치려면 항상 Christopher Lis의 Kaboomerz를 채택할 수 있습니다.

첫 번째 코드 조각은 수십 개의 작은 입자가 작은 폭발을 형성하여 빠르게 나타났다가 죽는 Dean의 폭발의 "동생" 버전을 특징으로 합니다. Christopher Lis의 경우 입자의 크기에 놀랄 것입니다. 마우스 커서에서 나오는 색종이는 엄청나게 거대합니다. 그러나 수명이 짧기 때문에 전체적인 효과는 압도적이지 않습니다. 그것은 단지 기쁘다.

펜 보기
Aleksei(@alek)의 입자 폭발 JS/CSS3.

펜 보기
#Codevember 5 – Christopher Lis(@chriscourses)의 Kaboomerz.

David A.의 DOM 폭발

이 아이디어가 마음에 들지만 더 디지털과 유사하고 복고풍에서 영감을 받은 것이 필요하다면 David가 만든 놀라운 솔루션이 있습니다. 그는 아름다운 8비트 터치를 구현하기 위해 원 대신 다양한 크기의 직사각형을 사용합니다. 그 결과 80년대 카리스마로 작은 폭발을 목격할 수 있다.

펜 보기
David A.(@meodai)의 DOM 폭발.

CreateJS의 WebGL Sparkles

현실적인 버전을 찾고 있다면 CreateJS의 WebGL Sparkles를 고려해 볼 수 있는 완벽한 예입니다. 여기의 모든 입자는 흰색이지만 잘 생각한 동작 덕분에 화면을 클릭하면 실제 축하 총소리처럼 보입니다. 게다가 커서에는 장면에 마법 같은 느낌을 주는 아름다운 흔적이 있습니다.

펜 보기
CreateJS: CreateJS(@createjs)의 WebGL Sparkles.

Christopher Lis의 자동 불꽃 발사기

말하자면, 우리의 폭발 컬렉션은 불꽃놀이 광기 없이는 완전하지 않을 것입니다. Christopher Lis의 Automatic Firework Launcher는 고려해야 할 환상적인 예입니다. 그것은 만화 같은 불꽃 발사기입니다. 알록달록한 입자와 카네이션 같은 모양 덕분에 별이 빛나는 하늘을 밝히는 실제 불꽃놀이를 연상시킵니다.

펜 보기
29일차 – Christopher Lis(@chriscourses)의 자동 불꽃 발사기.

LegoMushroom의 모달 창 파괴 개념

캔버스 실험은 목록에 있는 유일한 실험이 아닙니다. 폭발 효과는 모달 창과 같은 인터페이스의 다양한 요소에 적용할 수 있습니다. LegoMushroom은 이에 대한 생생한 증거를 가지고 있습니다. 그들의 모달 창 개념을 살펴보십시오. 창을 닫으면 사라지지 않고 여러 조각으로 나뉩니다. 그것은 요즘 꽤 인기 있는 모든 멋진 그림이 포함된 웹사이트에 완벽하게 추가됩니다.

펜 보기
LegoMushroom(@sol0mka)의 모달 창 파괴 개념.

Sylvain Garnot의 SCSS 폭발 효과 / Kacper Bawol의 SVG 텍스트 폭발 / Tim Horwood의 캔버스 텍스트 폭발

폭발 효과는 타이포그래피에도 유용할 수 있습니다. Sylvain Garnot의 SCSS Explosion Effect, Kacper Bawol의 SVG 텍스트 폭발 및 Tim Horwood의 Canvas 텍스트 폭발을 고려하십시오.

세 가지 모두 텍스트에 적용된 폭발 효과를 보여줍니다. 예상대로 마우스 커서가 각각을 트리거합니다.

Sylvain Garnot은 사용자가 각 글자를 100개의 작은 사각형으로 부풀릴 수 있도록 합니다. Kacper Bawol의 개념은 거의 동일해 보이지만 이번에는 기호가 작은 삼각형으로 나뉩니다. 그리고 Tim Horwood를 사용하면 사용자가 전체 텍스트를 작은 입자로 날려 결국에는 모든 것을 원래 상태로 되돌릴 수 있습니다. 세 가지 아이디어 모두 놀랍습니다.

펜 보기
SCSS – sylvain garnot(@sylvaingarnot)의 폭발 효과.

펜 보기
Kacper Bawol(@Casperovic)의 Svg 텍스트 폭발.

펜 보기
캔버스 텍스트 폭발, 클릭하면 Tim Horwood(@tdhorwood)가 볼 수 있습니다.

Ko.Yielie의 집 폭발

폭발 효과는 이미지에도 적용할 수 있습니다. Ko.Yielie의 이 개념이 좋은 예입니다. 사진을 클릭하면 작은 조각으로 날아갑니다. 실제 인터페이스에서 이를 위한 응용 프로그램을 찾기는 어렵지만, 일반적인 것을 독특하게 보이게 할 수 있는 몇 가지 특별한 솔루션을 손쉽게 사용할 수 있다는 것은 매우 좋은 일입니다.

펜 보기
Ko.Yelie(@ko-yelie)의 House Explosion.

폭발적인 특징

폭발 효과는 논란의 여지가 있는 도구입니다. "폭발적인" 특성과 강력한 카리스마 때문에 모든 인터페이스에 적합하지 않습니다. 마우스 커서와 함께 적용하면 무해하고 심지어 중립적인 것처럼 보이지만 꽤 "크게" 들리므로 주의해야 합니다.

모든 사람들이 웹사이트에서 오락을 찾는 것은 아닙니다. 그리고 모든 사람이 화려하고 압도적인 인상을 받는 것은 아닙니다. 결국 콘텐츠는 항상 왕으로 남아 있습니다.

그러나 장난스럽고 소위 "크게" 말하는 흥미진진한 사용자 상호 작용을 만들기 위한 몇 가지 특이한 방법을 찾고 있다면 폭발 효과가 의심할 여지 없이 유용할 수 있습니다.