눈부신 효과로 움직이는 텍스트 설정

모든 것을 움직이게 하는 경향이 요즘 그 안식처를 지배합니다. 이 광기를 따라 웹사이트의 모든 세부 사항에 생명을 불어넣는 데 집착하지 않을 수 없습니다. 정적 시대는 갔다. 모든 것이 역동적입니다. 그리고 뭔지 알아? 사용자는 그것을 완벽하게 알고 있습니다.

정적 웹 사이트가 흥미로운 경험을 제공한다고 믿도록 사용자를 속이려면 엄청난 노력이 필요하기 때문에 일부에게는 나쁜 소식입니다. 다른 사람들에게는 과시하고 내면의 천재성을 드러내며 역동적인 광기의 세계에 휩쓸릴 수 있는 기회입니다.

당신이 타이포그래피로 할 수 있는 유일한 방법이 엉뚱한 서체나 화려한 호버 효과를 사용하는 것이라고 여전히 믿고 있다면, 우리는 당신이 틀렸음을 증명할 것입니다. 타이포그래피로 놀라운 일을 할 수 있고, 인상을 준다는 면에서 다른 사람들에게 양보하지 않는 것으로 변형시킬 수 있습니다.

몰입형 또는 무거운 솔루션의 팬이 아니라면 이것이 실제로 탈출구입니다. 확실한 시작을 제공하기 위해 문자가 능숙하게 작동하여 훌륭한 결과를 가져온 몇 가지 놀라운 코드 스니펫을 수집했습니다.

Arsen Zbidniakov의 Shattering Text 애니메이션

Arsen Zbidniakov의 Shattering Text Animation을 보십시오. 화려하지 않습니까? 이 솔루션은 많은 작업과 불필요한 역동성으로 방문자를 압도하지 않으며 시스템에 과부하가 걸리지도 않습니다. 모든 사람을 "와우" 상태로 남겨두고 작동합니다.

GSAP 도구와 SVG 경로의 도움으로 만들어진 텍스트를 조합하고 분해하는 이 산산조각나는 효과는 정말 놀랍습니다. 게다가 그 위에 마우스 커서를 올리면 프로세스 속도를 제어하여 모든 것을 느리게 할 수 있습니다. 그것은 단지 환상적입니다.

Szenia Zadvornykh의 텍스트 애니메이션

첫 번째 예와 마찬가지로 이 코드 조각은 텍스트를 조합하고 분해하는 애니메이션을 보여줍니다. 그러나 이번에는 아티스트가 Three.js를 사용하여 모든 것에 생명을 불어넣었습니다. 이것은 또 다른 제어 가능한 폭발입니다. 네, 맞습니다. 클릭하고 드래그하여 애니메이션 속도를 제어할 수도 있습니다. 그리고 이 실험을 즐긴다면 Szenia가 더 재미있는 예를 제공합니다. 그의 프로필을 확인하십시오.

모션그래픽 서체와 아라의 또 다른 실험

Ara는 타이포그래피에 대한 몇 가지 놀라운 실험을 했습니다. 다음 두 예는 모두 기하학적 조작과 느낌과 첨단 기술을 기반으로 하는 추상적인 것입니다. 어떤 면에서는 약간 기괴하기도 합니다.

첫 번째 예에서 텍스트는 느리지만 확실하게 입자의 3D 터널을 형성하는 작은 조각으로 구성됩니다.

두 번째에서 각 기호는 삼각형, 정사각형 및 직사각형과 같은 기본 다각형으로 구성되어 움직임이 나타납니다. 누군가의 디지털 손이 모든 것을 함께 짜는 것처럼 느껴집니다.

Nate Wiley의 GSAP 텍스트 애니메이션

Nate Wiley는 Greensock의 텍스트 분할을 자신의 장점으로 전환하여 놀라운 텍스트 애니메이션을 재현했습니다. 그는 일반 텍스트 조각을 가져와 작은 조각으로 불어넣습니다. 각 조각은 하나의 상징입니다. 폭발 후 캐릭터가 다양한 방향으로 이동하며 부드럽게 사라집니다.

CSS 모션 타이포그래피: Dudley Storey의 텍스트 폭발

고급 기술이 솔루션의 아름다움 뒤에 서 있는 이전 예와 달리 여기에서는 CSS 기반 모션이 쇼를 실행합니다. Dudley Storey는 CSS 키프레임 애니메이션, 전환, JavaScript, SVG 및 약간의 Adobe Illustrator 마술을 실행합니다. 단어는 약간 산산조각이 나다가 여전히 읽을 수 있는 방식으로 다각형 조각으로 나뉩니다. 타이포그래피에 스타일리시한 잔인함을 더하고 싶다면 이 효과가 확실히 출발점입니다.

Yasunobu Ikeda의 Three.js를 사용한 3D의 많은 아이콘

Nate Wiley가 텍스트를 날려 버리면 이와 반대로 Yasunobu Ikeda는 화면 전체에 혼란스럽게 흩어져 있는 입자를 텍스트로 형성합니다. 여기서 입자는 작은 아이콘에 불과합니다. 저자는 Three.js를 사용하여 이 멋진 3D 애니메이션을 재현합니다.

SVG 경로 애니메이션 텍스트 Tamino Martinius의

Tamino Martinius는 SVG 경로를 사용하여 보다 전통적인 조작의 이점을 얻습니다. 매끄러운 모양, 매우 가는 선 및 액체와 같은 동작 덕분에 애니메이션은 우아함과 세련미를 풍깁니다. 첫 번째 예만큼 마음에 들지는 않지만 확실히 실용적인 솔루션이기 때문에 수많은 프로젝트에 적용할 수 있는 능력이 있습니다.

보다 실용적인 사용을 위해

말하자면, 우리는 영감을 주고 실용적인 솔루션도 포함했습니다. 여기에서는 이 방향으로 걸음마를 시작할 수 있도록 유형이 설정되어 있습니다.

처음 두 가지 예는 태그라인과 눈에 띄는 문구에 도움이 될 수 있는 효과를 제공하지만 후자는 일반 텍스트 블록에 대한 흥미로운 솔루션입니다.

생각 – Mikael Ainalem의 순환 생성

Mikael Ainalem의 펜은 단어가 회전하여 강조 표시되는 순환 애니메이션을 보여줍니다. 사용자를 한 단어에서 다른 단어로 안내하는 훌륭한 방법입니다.

PRESSED by Tryggvi Gylfason

Tryggvi Gylfason은 왼쪽에서 오른쪽으로 미끄러지는 움직이는 선을 추가하고 글자를 강제로 따라가도록 하여 단어의 기호를 누르거나 당깁니다. 효과는 작지만 매력적입니다.

Ignacio Correia의 TweenMax를 사용한 텍스트 스크롤 모션 블러

Ignacio Correia는 모션 블러 효과가 있는 텍스트를 제공합니다. 빠른 속도로 아래로 이동하면 텍스트가 거의 흰색 반점으로 흐려집니다. 속도를 늦추면 단어가 덜 모호해집니다.

타이포그래피에서 애니메이션을 사용하는 경우

이러한 활자 애니메이션은 우리로 하여금 멈추고 그 행동을 즐기게 만듭니다. 영웅 영역과 같은 다른 요소에서 볼 수 있는 애니메이션처럼 영감을 주고 시선을 사로잡습니다.

불행히도 우리는 야생에서 그들을 많이 볼 수 없습니다. 단순한 글자를 움직이는 것보다 액션이 가득한 전체 화면 애니메이션을 사용하는 데 모든 사람들이 집착하는 것 같습니다. 그러나 여기에서 보았듯이 이러한 효과는 사용자에게 많은 영향을 미칠 수 있습니다.