WordPress 웹사이트에 로딩 애니메이션 추가(10가지 옵션)

모든 사람은 항상 서두르고 로드하는 데 2~3초 이상 걸리는 웹 사이트는 "너무 느리다"고 인식됩니다. 고맙게도 일시적으로 그 패닉을 우회하고 사용자를 사이트에 로드할 수 있을 만큼 오래 머물게 하는 방법이 있습니다. 나는 완벽한 최면 로딩 애니메이션에 대해 이야기하고 있습니다.

이 게시물에서는 로딩 애니메이션이 정확히 무엇인지, 그 목적이 무엇인지, Divi 사이트를 포함한 모든 WordPress 사이트에 애니메이션을 추가하는 방법을 살펴보겠습니다.

로딩 애니메이션이란 무엇입니까?

프리로더라고도 하는 로딩 애니메이션은 모든 요소가 로드될 만큼 충분히 긴 시간 동안 웹사이트에 표시되는 눈길을 사로잡는 애니메이션입니다. 일부 로딩 애니메이션은 짧고 사용자의 주의를 오래 끌 필요가 없습니다. 그러나 사이트가 매우 큰 경우 사용자가 계속 머물 수 있도록 로딩 애니메이션이 진정으로 매력적이어야 하는 경우가 있습니다.

당신이 충분히 오랫동안 주변에 있었다면 로딩 애니메이션이 90년대부터 등장했다는 것을 알고 있을 것입니다. 인터넷 시대 초기에도 로딩 애니메이션이 있었습니다. 물론 그 당시에는 지금보다 훨씬 더 오래 지속될 수 있습니다. 또한 사용자를 지루하고 탐색하지 않고 훨씬 더 즐겁게 만드는 방법을 배웠습니다.

애니메이션 로드에 익숙해지기

애니메이션을 로드하는 가장 일반적인 스타일은 회전하는 원입니다. Apple 컴퓨터의 "죽음의 무지개 원"과 혼동하지 마십시오. 회전하는 원 로딩 애니메이션에는 엇갈린 그라데이션 모션이 있습니다. 최초의 회전식 프리로더에는 꽃에서 원, 눈송이, 심지어 회전하는 잉양에 이르기까지 다양한 버전이 있었습니다. 요즘에는 회전하는 로딩 애니메이션이 더 역동적이고 보기에 좋습니다.

회전 로딩 애니메이션은 대기 시간이 짧은 경우에만 작동합니다. 5초 이상은 이미 너무 많습니다. 이때 개발자는 더 창의적인 프리로더를 사용해야 합니다. 재미있고 재미있는 로딩 애니메이션은 시간이 얼마나 걸리든 사용자를 사이트에 머물게 합니다.

애니메이션을 더 잘 로드하기 위한 팁

단순히 움직이는 이미지보다 더 흥미롭게 만들기 위해 로딩 애니메이션에 추가할 수 있는 몇 가지가 있습니다. 다음은 그것들을 더 좋고 더 효과적으로 만들기 위한 몇 가지 팁입니다.

• 백분율 막대 포함
• 사용자가 얼마나 더 기다려야 하는지 표시
• 내부에서 무슨 일이 일어나고 있는지 설명하십시오(유머를 사용하기 위한 소품)
• 반드시 똑같은 동작을 반복하지 않는 재미있는 애니메이션을 사용하십시오.

브랜드 로딩 애니메이션의 이점

고유한 로딩 애니메이션을 만들거나 사용자 정의 옵션이 있는 플러그인을 사용할 기회가 있다면 프리로더에 브랜드가 있는지 확인하십시오. 브랜드의 웹사이트 색상을 사용하여 회사 일러스트레이션을 실제로 사용하는 것처럼 간단할 수 있습니다. 로딩 애니메이션 브랜딩 뒤에 있는 아이디어는 그것이 해당 사이트에 속하는 것처럼 보이고 단순한 추가 기능이 아니라는 것입니다. Awwwards 웹사이트의 이 정리는 당신의 창작물에 영감을 줄 수 있습니다.

WordPress 사이트에 로딩 애니메이션을 추가하는 방법

로딩 애니메이션을 추가하는 것은 생각보다 쉽습니다. WordPress 사이트에 하나를 추가하는 방법에는 여러 가지 옵션이 있습니다. 사용하기 쉬운 플러그인부터 사이트에 사용자 정의 코드 추가까지. 선택의 폭이 너무 다양하기 때문에 여기에 나열하여 살펴보고 자신에게 가장 적합한 것을 찾을 수 있도록 하겠습니다.

플러그인을 사용하여 로딩 애니메이션 추가하기

플러그인은 로딩 애니메이션을 추가하는 가장 쉽고 간단한 방법입니다. 코드를 사용하는 것이 불편하거나 시간이 없을 때 특히 유용합니다. 다음은 애니메이션 로드를 위한 가장 다양한 플러그인 목록입니다. 이들 중 일부는 무료이고 다른 일부는 프리미엄입니다. 경우에 따라 동일한 플러그인에 더 간단한 무료 버전과 더 강력한 프로 버전이 있습니다.

로프트로더

Loftloader에는 무료 버전과 프로 버전이 있습니다. 무료 버전에서는 몇 가지 프로로더를 사용해 보고 사이트와 브랜드에 맞게 사용자 정의할 수 있습니다. 프로 버전에는 더 많은 옵션과 더 세분화된 컨트롤이 있습니다.

플랫 프리로더

Flat Preloader는 제한된 다채로운 로딩 애니메이션 세트가 있는 간단한 무료 플러그인입니다. 이 플러그인은 프리로더에 대한 빠른 수정이 필요하고 색상이나 이미지를 사용자 정의할 필요가 없는 경우에 적합합니다.

베스트 프리로더

Best Preloader는 모든 웹사이트 스타일에 맞는 무료 원 옵션 로딩 애니메이션 플러그인입니다. 몇 가지 사용자 지정 컨트롤이 포함된 하나의 애니메이션이 제공됩니다.

페이지 로더

Page Loader는 사용자 정의 및 브랜딩 옵션이 많은 프리미엄 로딩 애니메이션 플러그인입니다. 시장에서 가장 좋아하는 프리 로더 플러그인 중 하나입니다.

WP 스마트 프리로더

WP Smart Preloader는 전체 사용자 지정 옵션이 있는 무료 오픈 소스 플러그인입니다. 애니메이션은 매우 정교하지는 않지만 모든 스타일의 웹사이트와 일치합니다. 색상과 설정을 아주 쉽게 사용자 정의할 수 있습니다.

플러그인 없이 로딩 애니메이션 추가하기

플러그인을 사용하지 않으려면 바로 사용할 수 있는 무료 로딩 애니메이션이 많이 있습니다. 추가해야 하는 코드 조각을 제공하는 일부 고급 자습서도 있습니다.

멀티미디어가 있는 PixelBuddha:

Multimedia의 직원은 PixelBuddha의 두 가지 무료 로딩 애니메이션 세트와 사이트에 설정하는 데 필요한 코드가 포함된 간단한 튜토리얼을 게시했습니다.

코드펜:

UX Planet의 이 Medium 기사는 다양한 스타일의 로딩 애니메이션을 많이 정리했습니다. 간단한 것과 더 복잡한 것이 있습니다. 대부분은 CodePen에서 포함되며 위젯 자체에서 HTML 및 CSS 스니펫을 가져올 수 있습니다. 로딩 애니메이션 설정을 위한 완전한 코드 세트에 이들을 삽입해야 합니다.

스핀킷:

Tobias Ashlink에는 GitHub를 통해 사용할 수 있는 코드가 포함된 멋진 로딩 애니메이션 모음이 포함된 SpinKit이 있습니다. 또한 사전 설정을 위해 전체 코드 세트에 추가해야 합니다.

로딩.io:

Loading.io는 다양한 옵션이 있는 로딩 애니메이션 모음입니다. CSS 프리로더, GIF 프리로더, 버튼 등이 있습니다. 사이트를 살펴보고 모든 옵션과 사이트에 옵션을 추가하는 방법에 대한 지침을 찾으십시오.

픽셀바:

사람들은 Pixelvars가 자신만의 로딩 애니메이션을 설정하는 데 필요한 모든 코드와 함께 편리한 튜토리얼을 작성했습니다. 위의 CodePen 또는 GitHub 애니메이션과 함께 코드를 사용할 수도 있습니다. 이 옵션은 어떤 사람들에게는 조금 더 고급스러워 보입니다. 당신이 좋은 코딩 지식을 가진 개발자라면 이것으로 가십시오.

많은 옵션이 있는데 어떤 선택을 하시겠습니까?

WordPress 웹사이트에 로딩 애니메이션을 추가하는 것은 쉽습니다. 다양한 옵션을 사용할 수 있으므로 하나를 선택하기만 하면 됩니다.

이 게시물에서는 사이트에 로딩 애니메이션을 추가하는 다양한 방법을 보여주었습니다. 선호하는 방법은 무엇입니까? 사용자 정의 설계 및 코드와 함께 하위 테마에 추가되었습니까? 사용자 정의 가능한 플러그인? 군더더기 없는 심플한 옵션? 자신의 로딩 애니메이션을 확인할 수 있도록 댓글로 알려주세요.

muchomoros/Shutterstock.com을 통한 추천 이미지