웹 디자인에서 Blob 기반 애니메이션 배경의 공격

애니메이션 배경은 현대 웹사이트의 인기 있는 기능입니다. 그것은 더 이상 트렌드나 특별한 것이 아닙니다. 이것은 요즘 영웅 영역을 장식하는 실행 가능한 방법 중 하나일 뿐입니다. 브라우저 호환성에 여전히 문제가 있지만 솔루션은 자체적으로 틈새 시장을 개척했습니다.

다양한 종류의 애니메이션이 있습니다. 당신은 우연히 발견할 수 있습니다:

• 입자 애니메이션;
• 만화경 애니메이션;
• 추상 3D 애니메이션;
• 부드러운 기하학적 애니메이션 등.

몇 년 전에는 별자리에서 영감을 받은 파티클 애니메이션이 그 자리를 지배했지만, 요즘은 물방울 모양의 애니메이션이 크리에이티브 팀의 마음을 설레게 합니다. 당신은 무엇을 할 수 있나요? 액체 거동은 저항할 수 없습니다. 큰 방울이 공간에서 어떻게 부드럽게 움직이는지를 보여주는 모핑 루틴은 온라인 청중을 쉽게 사로 잡고 웹 사이트를 선두에 놓습니다.

이 주류 기술의 이점을 얻기 위해 고유한 얼룩 모양의 애니메이션을 만드는 방법에 대한 힌트를 제공하는 뛰어난 코드 조각 모음을 제공합니다. 기존 도구나 새로운 도구를 사용하여 이를 수행할 수 있습니다. 이제 다음 프로젝트에 가장 적합한 제품을 찾아보겠습니다.

Uwe Chardon의 블롭 애니메이션

이 인기 있는 솔루션에 대한 Uwe Chardon의 견해는 실용적이고 영감을 줍니다. 깨끗한 환경에 배치된 아름다운 주황색과 부드러운 가장자리가 있는 단순하고 평평한 얼룩이 특징입니다. 그는 액체 행동을 꽤 잘 모방했습니다.

결과는 매우 인상적으로 보이는 단순한 모양과 복잡한 동작의 성공적인 조합입니다.

Uwe Chardon의 Pen Blob 애니메이션 순수 CSS 보기

Ashton Holgate의 Blob

앞의 예는 불규칙한 모양과 상대적으로 표현적인 모핑이 있는 전통적인 종류의 얼룩을 보여줍니다. 그러나 Ashton Holgate의 이 프로젝트는 원과 거의 경계를 이루는 보다 신성한 모양을 고수하며 변화가 거의 눈에 띄지 않습니다. 그럼에도 불구하고 그것은 또한 탁월해 보입니다.

그럴수록 작가는 텍스트를 가지고 놀았고, 텍스트가 거품의 영역에 부딪힐 때 텍스트의 색상을 반대 방향으로 강제 이동했습니다.

Ashton Holgate의 Pen Blob 보기

파비오 오타비아니의 바운싱 리퀴드 로더

Fabio Ottaviani는 얼룩 애니메이션에 내재된 끈적끈적한 행동의 장난기 있는 특성을 실천했습니다. 그의 거품은 작지만 사랑스러운 모핑과 재미있는 바운스로 상당한 임팩트를 줍니다.

펜 프로젝트의 명판에는 "로더"라고 되어 있지만 배경의 장식적인 디테일로 쉽게 전환할 수 있습니다. 아티스트가 JavaScript 마법을 전혀 사용하지 않기 때문에 이 작업을 수행하려면 HTML과 CSS만 알면 됩니다. 똑똑한.

Fabio Ottaviani의 펜 바운싱 리퀴드 로더 보기

Shaw의 캔버스 얼룩 테스트

이전 예제와 달리 이 드롭은 순수하게 JavaScript에 의해 생성됩니다. 이제 흥미진진한 솔루션에 뛰어들어 그래픽으로 복잡한 플레이를 할 준비가 되었습니다. 또한 원시적인 모습과 상당히 부드럽고 차분한 행동이 전체적으로 고요한 분위기를 자아낸다는 점에서 다른 콘셉트와 차별화된다.

그것은 꽤 보편적이고 중립적입니다. 따라서 수많은 프로젝트의 완벽한 배경 애니메이션이 될 수 있습니다.

Shaw의 펜 캔버스 얼룩 테스트 보기

Blob by 제프리

Jeffrey의 이 솔루션은 두 가지 경향의 성공적인 조합입니다. 여기에서 요즘 매우 인기 있는 얼룩덜룩한 배경과 다른 옵션보다 우세한 유동적인 동작을 찾을 수 있습니다.

코드 조각은 HTML, CSS 및 JavaScript로 만들어집니다. 다양한 브라우저와 장치에서 일관되게 보입니다. 아티스트는 거대한 얼룩과의 상호 작용을 실제적이고 인공적이지 않은 것처럼 만드는 기본 스프링 알고리즘을 사용합니다.

얼룩이 장면의 절반을 차지하더라도 구경꾼을 압도하지는 않습니다. 이러한 소박함 뒤에는 부드럽고 고요한 행동이 숨어 있습니다.

Jeffrey의 Pen Blob 보기

Blobs by Charlotte Dann

하나의 얼룩이 적절한 인상을 주기에 충분하지 않다면 항상 수십 개를 사용할 수 있습니다. 독창적인 코드 조각으로 Charlotte Dann이 일반적인 효과를 망치고 방문자를 압도하지 않으면서 이 작업을 수행하는 방법을 보여줍니다.

그녀의 코드 스니펫은 눈을 즐겁게 해줄 뿐입니다. 그것은 서로 상호 작용하는 많은 작은 움직이는 얼룩을 특징으로합니다. 각각은 작은 빛의 반점처럼 보입니다. 함께, 그들은 모든면에서 따뜻함을 발산하는 하나의 거대한 덩어리를 형성합니다.

Charlotte Dann의 펜 얼룩 보기

이제 평면 세계에서 3차원 세계로 이동해 보겠습니다.

Blob by Georgi Nikoloff

Georgi Nikoloff의 Blob은 포인트 인 케이스입니다. 생생한 컬러링, 첨단 기술의 외관 및 역동적인 동작으로 즉시 시선을 사로잡습니다. 개발자는 WebGL, GLSL 및 셰이더를 유리하게 사용하여 고급 기술을 최대한 활용합니다. 이 솔루션은 브라우저 호환성에 영향을 받지만 영감을 주는 것처럼 보입니다.

Georgi Nikoloff의 펜 얼룩 보기

Daniel Del Core의 실험 #6

Daniel Del Core는 온라인 청중에게 Simplex 노이즈를 사용하고 조심스럽게 재현된 텍스처로 장식하는 방법을 보여줍니다. 결과는 사탕에서 영감을 받은 페인트 같은 공입니다. 꽤 빠른 속도로 움직이지만, 단번에 눈을 떼기 어려울 정도로 매혹적이다.

Daniel Del Core의 Pen Experiment #6 보기

Eli Fitch의 가짜 입자 얼룩

스판덱스에 열광했던 80년대 팝스타의 과감한 개성과 카리스마를 지닌 앞의 예와 달리 소박한 테크노의 미래에서 온 듯한 느낌이다. 얼룩은 3D 모양을 얻기 위해 일부 각도에서 더 밝아지는 작은 입자로 구성됩니다.

예상대로 아티스트는 Three.js 마법과 절차적 텍스처를 사용한 독창적인 작업을 사용하여 이 개념을 구현합니다.

Eli Fitch의 Pen #3December 가짜 입자 얼룩 보기

Edwin Chen의 CSS Blob 생성기

Edwin Chen의 CSS Blob Generator로 컬렉션을 마치겠습니다. 제목에서 알 수 있듯 이 펜에는 물방울 모양을 만들 수 있는 작은 놀이터가 있습니다.

여기에서 각 테두리에 반경을 지정할 수 있는 작은 패널이 있습니다. 정적이고 평면적이지만 JavaScript를 사용하여 결과를 쉽게 복사하고 동작으로 설정할 수 있습니다.

Edwin Chen의 Pen CSS Blob Generator 보기

차분한 분위기를 위한 완벽한 형태

부드럽고 차분한 성격의 액체 행동이 요즘 인기를 얻고 있는 것은 놀라운 일이 아닙니다. 숲을 가로지르는 매혹적인 작은 개울처럼 끊임없이 변화하는 온라인 세계에서 당신을 유혹하고 고요한 섬의 역할을 합니다.

블롭 기반 애니메이션은 현대 프로젝트에 도움이 될 것입니다. 그들은 확실히 주의를 끌더라도 눈에 거슬리지 않습니다. 우아하고 평면적인 구현이든 화려한 3D를 원하든 쉽게 차분한 분위기를 조성할 것입니다.

경험을 풍부하게 하고 배경을 장식하는 동시에 콘텐츠에 자리를 내줄 것입니다. 이러한 배경은 시각적 데이터와 텍스트 데이터 간의 균형을 유지하는 데 도움이 됩니다.