Mo.js - 웹용 모션 그래픽 라이브러리

웹상의 애니메이션은 여기에 머물러 있습니다. JavaScript는 점점 강력 해지고 있습니다. 브라우저 지원은 각 통과 연도마다 증가하고 있습니다..

우리가 익숙한 대부분의 애니메이션은 인터페이스에 초점을 맞 춥니 다 : 드롭 다운 메뉴, 탭 단추 및 슬라이드 쇼는 일반적인 예입니다.

그러나 Mo.js는 다릅니다. 이것은 맞춤 모션 그래픽 용으로 제작 된 JavaScript 라이브러리 디자이너가 간단한 UI / UX 트릭을 뛰어 넘는 놀라운 애니메이션 기능을 만들 수 있도록 도와줍니다..

Mo.js 홈페이지를 방문하시면 전체 문서 초보자를위한 훌륭한 자습서와 함께.

이것을 주목하라. 라이브러리는 사용하기가 매우 어렵습니다.. 스스로 Mo.j를 조작하기 전에 기본 프론트 엔드 코딩에 익숙해야합니다. 그러나 라이브 데모를 공부하고 일부 소스 코드를 파헤 치면 많은 도움을받을 수 있습니다..

몇 가지 데모를보고 싶다면 GitHub의 기본 저장소를 살펴보십시오..

CodePen의 모든 링크에는 Mo.js 라이브 데모가수록되어 있습니다. 여기에는 다음이 포함됩니다 전체 화면 페이지 애니메이션 로더, click-to-animate microinteractions, 그리고 수 많은 형태 조작.

예를 들어,이 펜은 사용자 입력을 통해 아주 미친 상호 작용을 만듭니다 (펜에서 아무 곳이나 클릭하면 볼 수 있습니다).

이 펜 중 일부는 정상을 넘어 설 수도 있지만 JS 애니메이션이 아닙니다. 그들은 예술 작품과 정말 흡사합니다..

이 데모는 증명합니다. 우리가 얼마나 멀리 왔는지 웹상의 애니메이션. 누구나 프론트 엔드 코드 만 사용하여 이러한 효과를 만들 수 있다는 사실은 놀라운 것입니다.

Mo.js에서 더 많이보고 싶다면 GitHub의 데모를 살펴보십시오. Mo.js 라이브러리를 단계별로 사용하는 방법을 가르치는이 튜토리얼을 좋아할 수도 있습니다..

어느 쪽이든, 이것은 내가 좋아하는 애니메이션 라이브러리 중 하나 지금까지. 그것은 당신이 다른 곳에서는 찾을 수없는 많은 통제를 제공합니다. 모바일 앱의 미세 상호 작용을 웹 디자인으로 가져 오는 데 도움이됩니다..