웹사이트 및 앱에서 로딩 애니메이션 사용: 사용할 예 및 스니펫

웹 사이트에서 로딩 애니메이션의 용도는 무엇입니까?

모든 웹 개발자가 염두에 두어야 할 문제 중 하나는 페이지 로딩 시간입니다. 물론 현재 인터넷 속도가 빨라지면서 대부분의 페이지와 앱이 다소 빠르게 열립니다. 그러나 개선의 여지가 항상 남아 있습니다.

어떤 경우에는 사용자가 모든 데이터와 페이지가 로드될 때까지 잠시 기다리도록 하는 것이 불가피합니다. 그런 순간에는 사용자의 관심을 끌고 모든 콘텐츠가 로드될 때까지 사용자를 사이트에 오래 머물게 할 무언가가 필요합니다.

이를 위한 한 가지 방법은 시선을 사로잡는 로딩 애니메이션이나 로딩 gif를 사이트에 추가하여 사용자가 사이트의 나머지 부분이 로드되기를 기다리는 동안 즐거움을 유지하는 것입니다.

예를 들어, 우리 웹사이트의 경우에도 매우 간단한 로딩 애니메이션을 사용하여 사용자에게 현재 어떤 일이 일어나고 있음을 알립니다.

흥미로운 로딩 gif 애니메이션을 살펴보겠습니다.

• 애니메이션 영감 로드 중
• 애니메이션 로더를 만들기 위한 무료 CSS 및 JavaScript 스니펫

애니메이션 영감 로드 중

최고의 로딩 애니메이션과 로딩 GIF를 찾았으며 다음과 같습니다.

구체 애니메이션 WIP

이것은 나머지 콘텐츠가 로드될 때까지 충분히 오랫동안 주의를 끄는 로딩 화면 gif의 좋은 예입니다. 한순간도 바라볼 수 밖에 없는 신비한 연기에 둘러싸여 회전하는 원을 그린다. 그리고 잠시만 있으면 됩니다...

마이크로 애니메이션 로드 중

이 로딩 애니메이션 뒤에 있는 웹사이트는 양조장이므로 이 로더 gif는 세상에 모든 의미가 있습니다. 양조장 제품의 생산 과정을 묘사하여 페이지가 로드될 때까지 기다려야 하는 사용자의 불만을 줄여줄 뿐만 아니라 실제로 창의적인 방식으로 관심을 불러일으킬 것입니다.

Avanti 및 인디트로 로더

이 간단한 로딩 애니메이션 GIF는 그래픽의 위치를 ​​적절한 순서대로 전송하여 사용자의 관심을 끌기에 적합합니다. 이 로딩 아이콘의 아름다움은 단순함에 있습니다. 직관적이며 사용자가 좌절감에 빠져 페이지를 떠나지 않고 계속 사용할 수 있습니다.

로딩 화면 애니메이션 – 모래시계

이 로더 애니메이션 GIF는 두 가지 이유로 훌륭합니다. "기다려 주셔서 감사합니다"라는 메모는 사용자와의 커뮤니케이션을 설정하고 일정 수준의 이해를 얻는 데 도움이 됩니다. 반면에 모래시계 프리로더는 사용자의 관심을 끌고 대기 시간을 더 편안하게 만듭니다.

"bouncy" – B&W 로딩 애니메이션 9

가장 좋은 것은 종종 가장 단순한 것이며 동일한 규칙이 CSS 로딩 애니메이션에 적용됩니다. 이것은 어떤 사람들에게는 지루해 보일 수 있지만 실제로는 단순성에서 완벽합니다. 그리고 그것에 관한 가장 좋은 점은 당신이 그것을 보는 것을 멈출 수 없다는 것입니다.

멜팅 로더

이 로딩 애니메이션 gif는 사용자의 관심을 끌고 대기 시간을 더 즐겁게 만드는 두 가지 매우 효과적인 요소를 결합합니다.

녹아내리는 듯한 플루이드 효과로 시선을 단숨에 사로잡는 동시에 눈에 보이는 빛나는 라인 등 진정시키는 요소를 더했다.

물건 로더

중첩 패턴은 애니메이션 GIF를 로드할 때 항상 좋은 선택입니다. 믹스에 3D 효과를 추가하면 만들 가치가 있는 완벽한 로딩 애니메이션이 생깁니다!

프리로더 애니메이션

로딩 애니메이션을 디자인할 때 항상 대상 청중과 그들이 보고 싶어하는 것이 무엇인지 생각하십시오. 이 웹사이트는 크리스마스와 관련된 여러 가지를 결합하고 어린이 대상 온라인 코스에 완벽한 프리로더 gif를 만들어서 훌륭한 일을 했습니다. 올바른 방법을 알고 있다면 사용자에게 감정적인 반응을 불러일으키는 것은 항상 좋은 생각입니다.

로더 애니메이션

이 대기 중인 애니메이션 gif를 디자인한 사람은 누구나 다양한 수준에서 사용자의 관심을 끌기를 원했습니다. 그래서 단순한 로딩 애니메이션을 만드는 것보다 시선을 사로잡고 한동안 사용자의 시선을 사로잡을 멀티스크린 디스플레이 패턴을 선택했습니다. 회전 효과와 그라데이션 색상을 믹스에 추가하면 멋진 로딩 화면을 만들 수 있습니다.

앱용 로딩 화면 비주얼

이 로딩 바 gif는 목적에 부합할 뿐만 아니라 정말 멋지고 패셔너블합니다. Android/iOS 모바일 앱/웹용으로 설계되었으며 회전하는 지구본과 흥미로운 공상 과학 시각 효과를 만드는 색상 대비를 결합합니다.

애니메이션 로드 중

로딩 이미지 gif를 만드는 최악의 방법은 말이 안 되고 이야기가 전혀 없는 것을 만드는 것입니다. 사용자는 그것을 보고 싶어하지 않습니다. 그들은 그들과 감정적 인 연결을 만드는 것을 원합니다.

여기에서 볼 수 있는 프리로더 이미지는 이에 이상적입니다. 빠르게 변화하는 숫자와 빠르게 회전하는 색상 막대가 있는 이 로딩 애니메이션을 통해 사용자는 사이트가 가능한 한 빨리 로드되고 있으며 문제가 바로 백그라운드에서 처리되고 있음을 알 수 있습니다.

애니메이션 로더 생성을 위한 무료 CSS 및 JavaScript 스니펫

과거에 꽤 흥미로운 정적 로딩 페이지를 볼 기회가 있었지만 사용자의 관심을 끌고 싶을 때 동적 요소를 믹스에 추가하는 것은 항상 좋은 생각입니다.

원하는 대로 로딩 애니메이션을 만드는 데 도움이 되는 로딩 GIF 생성기 컬렉션을 살펴보겠습니다.

카운터가 있는 로드 바

CodePen에서 Nicolas Slatiner(@slatiner)의 펜 로더를 참조하십시오.

이 아름다운 로딩 바는 Nicolas Slatiner가 디자인했으며 로딩 비율을 표시하는 직관적인 로딩 애니메이션입니다. 디자인은 깨끗하고 그 아름다움은 단순함에 있습니다. 모든 웹사이트에 딱 맞는 훌륭한 진행률 표시줄 gif입니다.

라이트 로더

CodePen에서 Just a random person(@mathdotrandom)이 작성한 Pen Pure Css Loader를 참조하십시오.

스피너 모양의 이 라이트 로더는 약간의 트위스트가 있는 단순한 디자인을 좋아하는 훌륭한 로딩 애니메이션입니다. 순수한 CSS3 애니메이션과 결합된 스타버스트 모양을 사용하여 사용자의 관심을 즉시 사로잡을 gif 로딩 효과를 생성합니다.

다중 애니메이션 로더

Glen Cheney가 만든 이 로딩 서클 gif는

표시/숨기기 기능을 추가하는 몇 줄의 JavaScript로 이 기능이 없어도 작동하게 만들 수 있습니다. 즉, 다양한 색상, 크기 및 속도를 포함한 많은 옵션을 사용하여 순수한 CSS3에서 실행할 수 있습니다.

캔버스 프랙탈 로더

CodePen에서 Jack Rugile(@jackrugile)의 Pen Canvas Simple Circle Loader를 참조하십시오.

구식 Windows 화면 보호기를 기억하십니까? 이 스트라이프 프랙탈 캔버스 로딩 아이콘 gif는 약간 그런 느낌입니다. 자바스크립트를 많이 사용하며 캔버스 요소라고 하지만 실제로 페이지에서 캔버스 요소를 사용하지는 않는다.

사실 그렇게 불리는 이유는 자연스러운 캔버스 라이브러리인 Sketch.js에 의해 구동된다는 사실에 있습니다. 따라서 사이트에서 JavaScript를 약간 가지고 노는 데 문제가 없다면 이 로딩 애니메이션은 훌륭한 선택 중 하나입니다.

OuroboroCSS 로더

CodePen에서 Geoffrey Crofte(@CreativeJuiz)의 펜 CSS 로더를 참조하십시오.

Geoffrey Crofte가 만든 OuroboroCSS 로더는 순수한 CSS로 구동되며 모양으로 사라지는 듯한 착각을 일으키는 반복되는 애니메이션 주기로 작동합니다.

그러나이 디자인은 내부 로더에 적합하지만 전체 페이지 로딩 애니메이션으로 사용하는 것은 전체 페이지에서 단독으로 실행될 만큼 강력하지 않기 때문에 최선의 방법이 아닐 수 있습니다.

온도계 로더

이 사용자 지정 온도계 스타일 로더를 디자인할 때 제작자인 Hugo Giraudel은 아래에서 위로 다양한 색상을 통해 움직이는 이 로딩 애니메이션으로 CSS의 한계를 실제로 밀어붙였습니다. 애니메이션은 순수한 CSS이며 서로 내부에 중첩된 HTML 요소는 3개뿐입니다.

Three.js 로더

CodePen에서 Lennart Hase(@motorlatitude)의 Pen Three.js 로더를 참조하십시오.

Lennart Hase의 Three.js 로더는 멋진 로드 gif이므로 목록에 추가하기만 하면 됩니다. 무료 Three.js 3D 라이브러리를 사용하여 작은 표면에 계속 쳐다볼 수밖에 없는 회전 큐브를 만듭니다.

애니메이션은 JavaScript 및 WebGL 렌더링을 통해 제어됩니다. 3D 디자인은 웹 디자인의 가장 멋진 새로운 트렌드 중 하나이므로 로딩 애니메이션에 3D 요소를 추가하는 것은 항상 좋은 생각입니다.

오가닉 서클

CodePen에서 Jack Rugile(@jackrugile)의 Pen Organic Circle Canvas Loader를 참조하십시오.

이 인상적인 캔버스 서클 로더는 처음부터 이 놀랍고 눈길을 끄는 효과를 생성하기 위해 ctx 및 JavaScript 호출을 사용하여 HTML 캔버스 요소에 완전히 구축되었습니다. 이것은 어떤 웹사이트에도 쉽게 통합될 수 있는 로더 서클이 아니지만 볼 가치가 있다는 것을 인정해야 합니다.

단순 원형 회 전자

CodePen에서 MRU(@ruffiem)의 Pen Canvas 무한 로더를 참조하십시오.

단순하고 멋지지만 정말 효과적인 캔버스 로더를 원한다면 이 로더가 딱 맞는 선택일 수 있습니다. 애니메이션을 제어하는 ​​일부 기본 JavaScript를 사용하여 캔버스 요소의 내부 원을 무한대로 회전합니다. 이와 같은 단순하고 우아한 디자인의 가장 좋은 점 중 하나는 방해가 되거나 압도적이지 않고 어떤 사이트에도 쉽게 통합될 수 있다는 사실입니다.

순수 CSS 로더 도트

CodePen에서 Dave DeSandro(@desandro)의 펜 로더 점을 참조하십시오.

순수한 CSS 로더를 찾고 있다면 이 멋지고 재미있는 로딩 애니메이션 CSS를 고려해 볼 가치가 있습니다. 설정이 간단하고 눈길을 끌며 보는 재미가 있습니다. 또 다른 큰 장점은 모든 웹사이트에 쉽게 통합될 수 있고 훌륭한 로딩 애니메이션의 목적을 달성할 수 있다는 것입니다. 도트 모양과 애니메이션은 CSS를 통해 실행되며 JavaScript가 필요하지 않습니다.

슬라이딩 스퀘어 로더View

이 슬라이딩 스퀘어 로더는 네모와 함께 눈을 계속 움직이게 하므로 대기 시간을 조금 덜 답답하게 만듭니다. 전자제품이나 게임을 온라인으로 판매하여 방문자가 웹사이트에 계속 참여하도록 하는 비즈니스를 위한 훌륭한 솔루션입니다.

DotsLoaderView

갑자기 나타났다가 사라지는 튀는 검은 공은 재미있는 요소로 사용되며 보기 좋게 보이면서도 약간의 장난기가 있는 웹 사이트에 사용할 수 있습니다.

흐린 기어 로더

CodePen에서 Joni Trythall(@jonitrythall)의 Pen Blurred Gear Loader를 참조하십시오.

3개의 회전 톱니바퀴가 있는 흐릿한 톱니바퀴 로더는 움직임과 복잡성을 구현하며 기계 또는 기계 부품을 판매하는 비즈니스에 적합할 수 있습니다.

CSS 계단 로더

CodePen에서 Irko Palenius(@ispal)의 Pen CSS Stairs Loader를 참조하십시오.

흰색 공이 위로 점프하는 하강 및 상승 계단 로더는 최소한의 디자인을 가지고 있지만 매우 간단합니다. 자신을 진지하고 신뢰할 수 있다고 표현하려는 비즈니스에 적합할 수 있습니다.

로딩 펜

CodePen에서 Dave McCarthy(@AsLittleDesign)의 Pen ZbVVwa를 참조하십시오.

단순함의 가벼운 터치와 함께 왼쪽이나 오른쪽으로 움직이며 양 옆으로 하나씩 오는 애벌레 모양의 알록달록한 원은 짐을 싣는 일에 지루함을 덜어줍니다. 로더는 범용 애니메이션으로 거의 모든 종류의 비즈니스에 적합하며 방문자가 홈페이지에 도착하기를 기다리는 동안 즐겁게 유지해야 합니다.

CSS 로더

CodePen에서 Mathieu Richard(@MathieuRichard)의 펜 로더 css3를 참조하십시오.

앞으로 나아갈 때 더 커지고 돌아갈 때 원래 모양으로 돌아가는 이 롤링 큐브와 같은 간단한 "주의를 끄는" 로더는 방문자에게 똑똑하고 세련되게 보이고자 하는 비즈니스를 위한 예약된 솔루션입니다.

선명한 CSS3 스피너

CodePen에서 Kevin Jannis(@kevinjannis)의 Pen Vivid CSS3 Spinner를 참조하십시오.

회전하는 무지개가 기하학적인 꽃 모양으로 구르는 생생한 스피너 로더는 방문객을 격려하고 재미 있고 신나는 일을 준비하는 데 도움을 줄 수 있습니다. 이러한 로더는 제품이나 서비스를 어린이에게 판매하는 비즈니스에 사용할 수 있습니다. 어린이 교육 현장에서 잘 작동해야 합니다.

프리즘 로딩 화면

CodePen에서 Ken Chen(@kenchen)의 펜 프리즘 로딩 화면을 참조하십시오.

프리즘 로딩 화면은 LinkedIn의 사진 배경 중 하나를 상기시켜야 합니다. 로더는 잠재적으로 회사 로고를 특징으로 할 수 있는 중앙의 주요 요소와 함께 공간에서 움직이는 별자리처럼 원격으로 보입니다. 로더는 예를 들어 B2B 부문과 같이 국제 고객과 협력하는 비즈니스에 사용할 수 있습니다.

짐을 싣는 사람

CodePen에서 Alex Rutherford(@Ruddy)의 펜 로더를 참조하십시오.

버라이어티처럼? 다음은 다양한 그림의 애니메이션 변경과 함께 카운트다운을 볼 수 있도록 방문자를 즐겁게 하는 로더입니다. 이 로더는 모든 사진을 회전시킬 수 있으므로 모든 비즈니스 요구 사항에 맞출 수 있습니다.

로더 리디렉션

CodePen에서 Mr Alien(@mr_alien)의 Pen Redirecting Loader를 참조하십시오.

등에 제트팩을 짊어진 채 최대한 빨리 날아가는 남자의 실루엣이 있습니다. 사용자를 다음 페이지로 리디렉션하는 이러한 로더는 거의 모든 비즈니스, 특히 서비스의 속도 요소를 강조하려는 비즈니스에서 사용할 수 있습니다.

Codepen 로딩 도트

미니멀하고 간결한 디자인을 갖춘 이 도트 프리로더는 예술가나 디자이너가 예를 들어 온라인 포트폴리오에 사용할 수 있습니다.

프리로더 애니메이션

CodePen에서 Jason Miller(@imjasonmiller)의 Pen Preloader SVG 애니메이션을 참조하십시오.

이 프리로더는 스네이크 게임을 떠올리게 하지 않나요? 플러그가 있는 이 에너지 아이콘 애니메이션은 인터넷 제공업체 또는 기업과 클라이언트의 협업을 돕는 기타 기관에 적합합니다.

SVG ∞ 로더

CodePen에서 Ana Tudor(@thebabydino)가 작성한 Pen SVG ∞ 로더(JS 없음, 크로스 브라우저, 최소 코드)를 참조하세요.

JS 없음, 브라우저 간, 최소 코드. 20줄의 CSS와 4줄의 생성된 SVG.

CSS 변수가 있는 토마토 로더

CodePen에서 Ana Tudor(@thebabydino)의 CSS vars(Edge 지원 없음)가 포함된 펜 토마토 로더를 참조하세요.

애니메이션 지연 값으로 calc()를 지원하지 않기 때문에 Edge에서 작동하지 않습니다.

애니메이션 플립 프리로더

CodePen에서 Animated Creativity(@animatedcreativity)의 Pen Animated FlipPreloader – SCSS를 참조하십시오.

CSS로 만든 멋진 플립 프리로더. 색상은 완전히 논리적입니다. 모든 색상을 쉽게 설정할 수 있습니다.

SpinKit

CSS로 움직이는 간단한 로딩 스피너. 데모를 참조하십시오. SpinKit은 하드웨어 가속(변환 및 불투명도) CSS 애니메이션을 사용하여 매끄럽고 쉽게 사용자 지정할 수 있는 애니메이션을 만듭니다.

CSS 스피너

웹사이트 로딩 애니메이션을 위한 12개의 작고 우아한 순수 CSS 스피너 모음입니다.

애니메이션 로드에 대한 FAQ

1. 로딩 애니메이션이란 무엇이며 그 목적은 무엇입니까?

사용자가 자료가 로드될 때까지 기다리면 로드 애니메이션이 뒤에서 무슨 일이 일어나고 있는지 보여줍니다. 그 기능은 시스템이 요청을 처리하고 있음을 사용자에게 시각적으로 확인하고 즉시 명확하지 않은 경우에도 시스템 작동에 대한 이해를 돕는 것입니다. 재료가 궁극적으로 로드될 것이라는 아이디어를 생성함으로써 로드 애니메이션은 사용자 성가심을 줄이는 데 도움이 될 수도 있습니다.

2. 애니메이션 로딩이 웹사이트 또는 앱에서 사용자 경험을 개선하는 데 어떻게 도움이 됩니까?

콘텐츠 로드를 기다리는 동안 사용자가 경험하는 악화 수준을 줄임으로써 로딩 애니메이션은 사용자 경험 향상에 기여할 수 있습니다. 또한 시스템이 작동 중이고 요청을 처리하고 있다는 시각적 표시를 사용자에게 보여줄 수 있습니다. 로딩 애니메이션은 백그라운드에서 일어나는 일에 대한 정보를 제공함으로써 사용자가 기다리고 있는 정보에 대한 관심을 유지하는 데 도움이 될 수 있습니다.

3. 다른 유형의 로딩 애니메이션의 예는 무엇입니까?

진행률 표시줄, 스피너, 펄싱 애니메이션 및 스켈레톤 화면은 다양한 로딩 애니메이션의 몇 가지 예입니다. 웹 애플리케이션은 시스템에서 요청이 처리되고 있음을 표시하기 위해 진행률 표시줄과 스피너를 자주 사용합니다. 모바일 앱은 종종 펄스 애니메이션을 사용하여 사용자에게 백그라운드에서 어떤 일이 진행되고 있음을 알립니다. 스켈레톤 화면은 사용자에게 로드될 때 표시될 콘텐츠의 미리보기를 제공하기 위해 사용됩니다.

4. 시각적으로 매력적이고 기능적인 로딩 애니메이션을 디자인하려면 어떻게 해야 합니까?

로딩 애니메이션을 만들 때 애니메이션의 목표와 사용자의 기대치를 모두 고려해야 합니다. 로딩 애니메이션의 시각적 매력은 로딩되는 콘텐츠를 손상시키지 않아야 합니다. 또한 절차가 진행되는 방식에 대한 명확한 피드백을 사용자에게 제공하여 유용해야 합니다. 애니메이션의 성능도 조정해야 합니다. 사용자가 느리게 로드되는 애니메이션에 짜증이 나고 참을성이 없게 될 수 있기 때문입니다.

5. 콘텐츠가 로드되기 전에 로딩 애니메이션을 얼마나 오래 표시해야 하나요?

콘텐츠의 복잡성이 로드되고 사용자의 인터넷 연결 속도에 따라 로딩 애니메이션이 표시되는 시간이 결정됩니다. 적절한 경험 법칙은 사용자가 더 긴 로딩 시간에 참을성이 없을 수 있으므로 화면에 애니메이션을 5초 이상 유지하지 않는 것입니다. 그러나 이것과 자료가 긍정적인 사용자 경험을 제공할 만큼 충분히 로드되었는지 확인하는 것 사이의 균형을 맞추는 것이 중요합니다.

6. 장애가 있는 사용자가 로딩 애니메이션에 액세스할 수 있도록 하려면 어떻게 해야 합니까?

이미지에 대한 대체 언어를 제공하고 애니메이션이 간질이 있는 사용자에게 발작을 일으키지 않도록 하는 것과 같은 접근성 규칙을 따르면 장애가 있는 사용자가 로드 애니메이션에 액세스할 수 있는지 확인하는 데 도움이 됩니다. 또한 사용자가 언제든지 애니메이션을 일시 중지하거나 중지할 수 있도록 하는 것이 중요합니다.

7. 웹사이트 또는 앱에서 로딩 애니메이션을 사용하기 위한 모범 사례는 무엇입니까?

웹사이트나 앱에서 로딩 애니메이션을 사용할 때 애니메이션을 간단하고 명확하게 유지하고, 드물게 사용하고, 프로세스가 진행되는 방식에 대한 피드백을 사용자에게 제공하는 것이 중요합니다. 또한 애니메이션이 사용자가 액세스할 수 있고 성능이 최적화되었는지 확인하는 것이 중요합니다.

8. 내 웹사이트 또는 앱의 브랜딩과 일치하도록 로딩 애니메이션을 사용자 정의할 수 있습니까?

물론 로딩 애니메이션은 웹사이트나 앱의 정체성에 맞게 변경할 수 있습니다. 이는 브랜드 아이덴티티를 지원하고 사용자가 일관된 시각적 경험을 갖도록 도울 수 있습니다. 그러나 브랜딩과 유용성 사이의 균형을 유지하는 것이 중요합니다. 애니메이션이 프로세스 상태에 대한 명확한 피드백을 제공하고 로드되는 자료에서 주의를 분산시키지 않도록 해야 합니다.

9. 사용자 경험 개선 측면에서 로딩 애니메이션의 효과를 어떻게 측정할 수 있습니까?

로딩 애니메이션이 사용자 경험을 얼마나 잘 향상시키는지 판단하기 위해 설문조사나 사용자 테스트 등을 통해 사용자 입력을 받는 것이 중요합니다. 사용자 피드백을 사용하여 애니메이션이 프로세스 상태를 얼마나 잘 전달하고 긴 로딩 시간 동안 사용자 성가심을 완화하는지 여부를 평가할 수 있습니다. 로딩 애니메이션이 사용자 참여에 어떤 영향을 미치는지 확인하려면 이탈률 및 세션 길이와 같은 데이터를 모니터링하는 것도 중요합니다.

10. 로딩 애니메이션을 디자인할 때 피해야 할 일반적인 실수는 무엇입니까?

로딩 애니메이션을 만드는 동안 주의를 산만하게 하는 애니메이션 사용, 프로세스 진행 상황에 대한 피드백 제공 안 함, 지나치게 긴 애니메이션 사용 등을 피해야 할 일반적인 함정이 있습니다. 또한 애니메이션이 성능에 최적화되어 있고 모든 사용자가 액세스할 수 있는지 확인하는 것이 중요합니다. 애니메이션이 모든 사용자에게 작동하는지 확인하려면 다양한 장치와 인터넷 연결에서 테스트하는 것도 중요합니다.

웹사이트에서 로딩 애니메이션 사용에 대한 생각 끝내기

웹사이트를 디자인할 때 모든 세부 사항을 고려해야 합니다. 로딩 시간이 너무 길고 사용자의 절반이 귀하의 사이트를 볼 기회를 갖기도 전에 포기한다면 멋진 웹 사이트를 갖는 것은 쓸모가 없습니다.

이러한 일이 발생하지 않도록 하려면 재미있는 애니메이션을 웹 사이트에 통합하고 나머지 콘텐츠가 로드될 때까지 필요한 만큼 사용자의 주의를 끌어야 합니다. 창의력을 발휘하고 모든 사용자가 보고 싶어할 재미있는 대기 GIF를 디자인하세요.

아마도 WordPress를 위한 최고의 약속 일정 플러그인인 Amelia 팀이 만든 이 기사가 마음에 드셨기를 바랍니다.

웹사이트 레이아웃에서 이것을 확인해야 합니다.

또한 현대 웹 디자인, 레이아웃 디자인, 나쁜 웹사이트, 버튼 디자인, 시각 디자인, 최고의 404 페이지, 웹 디자인 트렌드 및 어두운 배경과 같은 몇 가지 관련 주제에 대해서도 썼습니다.