mo.js 라이브러리로 애니메이션을 어떻게 만드는 방법

Sep 14, 2025
어떻게
Mo.js: animation
(이미지 크레디트 : Pexels / Frank Kagumba)

mo.js는 전체 화면 페이지 애니메이션 로더를 촉진 할뿐만 아니라 마이크로 상호 작용을 클릭 할뿐만 아니라 형태 조작을 클릭하는 독특한 모션 그래픽 JavaScript 라이브러리입니다.

잠시 동안 웹 디자인 장면을 따르고 있다면, 기회는 당신이 건전하게 - 또는 넓은 애니메이션 기술과 라이브러리와 상호 작용할 것입니다. CSS, HTML5 및 JavaScript와 같은 핵심 기술은 더욱 강력 해지고, 브라우저 지원은 시간이 지남에 따라 향상되고 있습니다. 이 함의는보다 정교한 웹 애니메이션을 장치에서 지원할 수 있다는 것입니다. 기억하십시오, 복잡한 사이트를 구축하는 경우 웹 호스팅 서비스는 프로젝트를 지원할 수 있어야합니다.

일부 애니메이션 영감이 필요합니까? 여기에 멋진 예제가 있습니다 CSS 애니메이션 다시 만들기. 코딩하지 않고 사이트를 만들고 싶습니까? 이것들을 시도하십시오 웹 사이트 빌더 ...에

어떻게 mo.js가 도움이 될 수 있습니까?

웹 애니메이션이 나타나는 것처럼 여기에 있습니다. 그러나 가장 인기있는 애니메이션 기술을 사용하는 단점은 슬라이드 쇼, 탭 버튼 및 드롭 다운 메뉴와 같은 기존 UI / UX 요소 애니메이션을 향해 중력이 있다는 것입니다. 결과적으로 사용하면 결국 사이트가 너무 익숙하고 흥미 진진한 사이트를 만들 수 있습니다.

mo.js는 이것을 도울 수 있습니다. 라이브러리를 사용하면 HTML, Shape, Swirl, Burst 및 Stagger와 같은 내장 구성 요소를 활용하여 Not-So-So-Not-So-So-Site Elements를 애니메이션하게 사용할 수 있습니다. 라이브러리는 사용하기가 매우 쉽고 빠르고 망막 준비, 모듈 식 및 오픈 소스입니다. 이 튜토리얼에서는 MO.JS와의 작업의 기본 사항이 도입되고 두 가지 기술이 보여줍니다. 폭발 및 거품.

01. 시작하십시오

튜토리얼 파일을 저장하기 위해 바탕 화면에 Mo.js 폴더를 만들어 시작하십시오. 세 가지 추가 폴더를 만듭니다. CSS는 스타일링 파일, IMG 용 IMG 및 JS에 JavaScript 파일의 이미지를 저장합니다. HTML 파일은 루트 폴더에 저장됩니다. (백업하는 것이 좋습니다 클라우드 스토리지 짐마자

02. 페이지 구조를 만듭니다

코드 편집기를 열고 인덱스를 작성하여 주 웹 페이지에 대해 마크 업을 포함 할 수 있습니다. 기본 구조를 만들고 페이지에 적합한 제목을 제공합니다. 

 & lt; DOCTYPE HTML & GT;
& lt; html lang = "en"& gt;
    & lt; head & gt;
        & lt; meta charset = "UTF-8"& gt;
        & lt; 타이틀 & gt; Blast Technique & lt;
타이틀 & gt;
 & lt; / head & gt;
& lt; body & gt; & lt; / body & gt;
& lt; / html & gt;

03. 구조 페이지를 구조화하십시오

튜토리얼은 두 부분으로 나뉩니다. 첫 번째는 폭발 기술을 보여줍니다. 두 번째는 버블 개념을 보여줍니다. 결과적으로 각 기술마다 하나씩 두 개의 HTML 파일을 준비합니다. BLAST 기술을 걷어차려면 페이지 제목을 포함 할 DIV 섹션을 만듭니다. 왼쪽 상단 구석에 스타일이없는 텍스트를 관찰 해야하는 브라우저에서 페이지를 렌더링하십시오.

& lt; body & gt; & lt; div class = "text"& gt; & lt; p & gt; MO.JS 애니메이션 & lt; / p & gt; & lt; / div & gt; & lt; / body & gt;

04. CSS를 연결하십시오

코드 편집기를 열고 CSS 폴더 안에 Styles.css 파일을 만듭니다. 헤드 섹션 에이 코드를 추가하여 HTML 문서 에서이 파일에 대한 링크를 만듭니다. & lt; 링크 rel = "스타일 시트"href = "css / styles.css"& gt; ...에 스타일이 추가되지 않았으므로 페이지 3에서 설명한대로 페이지가 렌더링되지 않으므로 스타일링이 최소화되므로 HTML과 CSS를 결합하여 인라인 스타일링을 사용하도록 선택할 수 있습니다.

05. 스타일의 배경

Mo.js: step 5

(이미지 크레디트 : Pexels / Frank Kagumba)

다음으로 배경 이미지를 추가하여 배경을 스타일링합니다. 우리는 Pexels에서 Nikolai Ultang의 무료 경치 좋은 풍경 배경을 사용했습니다. 당신은 할 수 있습니다 여기에서 다운로드하십시오 ...에 img 폴더 안에이 (또는 자신의 이미지)를 저장하십시오. 페이지를 렌더링하여 백그라운드의 변경 사항을 표시합니다. 

 몸, html {
  배경 이미지 : URL (bg.jpg);
  배경 크기 : 덮개;
  패딩 : 0;
  마진 : 0;
  너비 : 100 %;
  높이 : 100 %;
  오버플로 : 숨김;
}

06. 텍스트 스타일

Mo.js: Step 06

(이미지 크레디트 : Pexels / Frank Kagumba)

그런 다음 텍스트가 현재 페이지 중앙에 렌더링되어 현재 왼쪽 상단 모서리에 나타납니다. 텍스트를 중앙 집중화하려면 절대 위치를 선택하고 맨 위, 왼쪽 및 오른쪽 여백을 사용하여 정확한 위치 지정을 설정합니다. 텍스트는 텍스트 변환 속성을 사용하여 텍스트로 변환됩니다. Text-Align 속성도 중앙으로 설정됩니다. 

 텍스트 {
  글꼴 - 가족 : 세기 고딕, SANS-SERIF;
  색상 : #fff;
  텍스트 변환 : 대문자;
  글꼴 크기 : 50px;
  글꼴 무게 : Bolder;
  위치 : 절대;
  상단 : 50px;
 왼쪽 : 25 %;
 오른쪽 : 30 %;
  텍스트 - 정렬 : 센터;
     }

07. Mo.js를 설치하십시오

다른 라이브러리와 마찬가지로 Mo.js는 여러 옵션을 통해 설치됩니다. 우리가 고용하는 가장 간단한 접근 방식은 CDN 서버에서 직접 액세스하고 있습니다. 본문 섹션에 다음 코드를 추가하십시오.

& lt; script src = '//cdn.jsdelivr.net MOJS / 0.265.6 / mo.min.js '& gt; & lt; / script & gt;

OFF 라인을 개발하는 경우 도서관이 될 수 있습니다. GitHub에서 직접 다운로드 한 것 적절한 명령을 사용하여 Bower 또는 NPM 패키지를 사용하여 설치합니다. 

 Bower는 MO-JS를 설치합니다
NPM 설치 MO-JS.

일단 다운로드되면 직접 참조 할 수 있습니다.

& lt; script src = "mo.js"유형 = "텍스트 자바 스크립트 "& gt; & lt; / script & gt;

마지막으로 새 Script.js 파일을 작성하고 JS 폴더에 저장하십시오. 이 파일에 JavaScript 기능을 추가합니다. 다음과 같이 본문 섹션에 링크하십시오. 아래와 같이 텍스트 제목 아래에 배치하십시오.

& lt; body & gt; & lt; div class = "text"& gt; & lt; p & gt; MO.JS 애니메이션 & lt; / p & gt; & lt; / div & gt; & lt; script src = 'https : //cdn.jsdelivr net / mojs / 0.265.6 / mo.min.js '& gt; & lt; / script & gt; & lt; src = "js / script.js"& gt; & lt; 스크립트 & gt; & lt; / body & gt;

08. 첫 번째 폭발을 만듭니다

코드를 개발하기 전에 우리가 창조하고있는 것을 강조하기 위해 현명합니다. 무언가를 폭로하는 것은 단순히 폭발적인 방식으로 더 작은 비트로 분리되는 것을 의미합니다. 우리는 단순한 객체 (원)를 만들고 사용자가 그것을 클릭하면 폭발적인 방식으로 분리됩니다.

09. Circle 객체를 만듭니다

Mo.js: Step 09

(이미지 크레디트 : Pexels / Frank Kagumba)

첫째, 블라스팅 할 객체가 생성됩니다 (원). 그러나 Mo.js는 직사각형 (Rect), 교차, ZigZag 및 다각형을 포함한 다른 모양을 지원합니다. 셰이프 유형을 지정하지 못하는 경우, 서클은 기본적으로 기본 원을 만들어 var 또는 const를 사용하여 셰이프 함수를 호출하여 속성을 지정하십시오. 

 // 간단한 객체를 만드는 것
const circ = new mojs.shape ({
  isshowstart : true,
             반경 : 100,
});

코드는 주어진 반경이있는 기본 원 객체를 만듭니다. isshowStart 변수에 개체를 표시 해야하는지 여부를 지정하는 부울 값이 지정됩니다. 페이지의 중심에 작은 마젠타 색 원을 표시하도록 코드를 렌더링하십시오.

10. 원을 움직이게하십시오

코드 스 니펫은 스케일 및 불투명도가 1에서 0으로 변경되도록 지정하여 객체가 사라지는 것을 나타냅니다. 애니메이션의 완화 및 지연도 설정됩니다. 아직 초기화하지 못한 이래로 애니메이션이 재생되지 않습니다. 이렇게하려면 아래의 기능을 추가하십시오. 

 document.addeventListener ( '클릭', 함수
(e) {
circ.
 재생 ();
});

11. 폭발하는 다각형을 만드십시오

Mo.js: Step 11

(이미지 크레디트 : Pexels / Frank Kagumba)

이제 원이 애니메이션이되기 때문에 동시에 렌더링하는 폭발 애니메이션을 만듭니다. 첫 번째 BLAST는 폴리곤 모양을 사용하여 폭발을 이끌어냅니다. 폭발을 만들려면 아래 코드 스 니펫과 같이 Mo.js 기능 버스트를 사용하십시오. 

 const burst1 = new mojs.burst ({
  왼쪽 : 0, TOP : 0,
  카운트 : 7,
  반지름 : {50 : 250},
  어린이 : {
    채우기 : '화이트',
    모양 : '다각형',
    뇌졸중 : { '흰색': 'A50710'},
    Strokewidth : 4,
    반경 : 'rand (30, 60)',
    반경 : 0,
    규모 : {1 : 0},
    경로 스케일 : 'rand (.5, 1)',
    학위 : 360,
    isforce3d : true}});

코드는 폭발에 7 개의 다각형 모양을 할당하고 2 개의 반지름을 지정합니다. 첫 번째는 전체 애니메이션을 의미하지만 두 번째는 애니메이션 내의 특정 다각형 객체에 초점을 맞 춥니 다. 이벤트 리스너 기능에 버스트를 추가하여 마우스 클릭에 응답합니다. 두 개의 새로운 매개 변수가 추가되었습니다. 조정과 생성. 조정하면 BLASH가 페이지의 어느 곳에서나 렌더링하도록 만드는 반면 생성은 버스트 애니메이션을 초기화합니다. 페이지를 렌더링하십시오. 원과 동시에 나타나는 폭발 요소를 관찰하십시오. 

 document.addeventListener ( '클릭', 함수
(e) {
             burst1.
  조정 ({x : e.pagex, y : e.pagey}).
  생성 ().
 재생 ();
circ.
 재생 ();
});

12. 두 번째 폭발을 만듭니다

Mo.js: Step 12

(이미지 크레디트 : Pexels / Frank Kagumba)

그런 다음 다른 모양 옵션을 사용하여 두 번째 BLAST를 만듭니다. 코드는 이전 BLAST의 구조를 따르고 몇 가지 매개 변수 만 변경합니다. 

 const burst2 = new mojs.burst ({
  TOP : 0, 왼쪽 : 0,
  카운트 : 4,
  반지름 : {0 : 250},
어린이 : {
    모양 : [ 'Circle', 'Rect'],
    포인트 : 5,
    채우기 : [ '흰색'],
    반경 : 'rand (30, 60)',
    지연 : '비틀림 (50)',
    easing : [ 'Cubic.out', 'Cubic.out',
'cubic.out',
    규모 : {1 : 0},
    경로 스케일 : 'rand (.5, 1)',
    isforce3d : true}});

버스트를 이벤트 리스너 함수에 추가하십시오. 

 document.addeventListener ( '클릭', 함수
(e) {
             burst1.
  조정 ({x : e.pagex, y : e.pagey}).
  생성 ().
 재생 ();
             burst2.
             조정 ({x : e.pagex, y : e.pagey
}).
             일으키다().
             다시 하다();
circ.
 재생 ();
});

13. 서클 폭발을 추가하십시오

애니메이션을 더욱 향상시키기 위해 우리는 원형 폭발을 추가합니다. 11 단계와 12 단계에서 코드를 검사하는 것은 두 가지 유형의 버스트 사이에 존재하는 많은 유사성을 나타냅니다. 세 번째 BLAST를 만들 때 우리는 3 개의 점 (...)으로 쓰여진 스프레드 연산자를 사용하여 너무 많은 코드를 다시 작성하지 않습니다. 그러나 먼저 재사용하려는 유사한 기능이 포함 된 변수를 선언합니다. 그 후, 스프레드 연산자를 사용하여 다른 두 개의 원을 만드는 것만으로 만들 수 있습니다. 

 // 비슷한 변수 생성
매개 변수
    const circle_opts = {
  왼쪽 : 0, TOP : 0,
   채우기 : '화이트',
  스케일 : {.2 : 1},
  불투명도 : {1 : 0},
  isforce3d : true,
  isshowend : 거짓
};

이 코드는 채우기 유형, 스케일, 불투명도 및 애니메이션 끝에 표시할지 여부를 지정합니다. 두 개의 원 애니메이션은 다음과 같이 작성됩니다. 

 const circle1 = new mojs.shape ({
  ... circle_opts,
  반경 : 200});
const circle2 = new mojs.shape ({
  ... circle_opts,
  반경 : 240,
  완화 : 'Cubic.out',
  지연 : 300});

원형 모양을 추가하십시오. 

 document.addeventListener ( '클릭', 함수
(e) {
             burst1.
  조정 ({x : e.pagex, y : e.pagey}).
  생성 ().
 재생 ();
             burst2.
             조정 ({x : e.pagex, y : e.pagey
}).
             일으키다().
             다시 하다();
circ.
 재생 ();
});

14. 기본 거품을 렌더링하십시오

다른 한편으로 거품 애니메이션이 거품 애니메이션을 더 작은 조각으로 분리하는 BLAST 애니메이션과 달리 클릭 된 개체를 더 큰 공간으로 변환합니다. 개념은 객체가 지속적으로 크기가 지속적으로 확장되는 풍선을 불어 넣는 비유를 채택합니다. 이렇게하려면 새 변수 OpenBackground를 만들고 전체 배경이 개체와 비슷한 색상을 달성 할 속성을 할당하기 만하면됩니다. 결과적으로 이것은 버블 링의 뉘앙스를 만듭니다. 

 const openbackground = new mojs.shape ({
  채우기 : '# FC2D79',
  왼쪽 : 0, TOP : 0,
  스케일 : {0 : 4.5},
  isshowstart : true,
  반경 : 15,
  isforce3d : true,
  istimeliness : true,
지연 : 150,
  반경 : 200,
  완화 : 'Cubic.out',
  역방향 : 'expo.in',});

백그라운드 변수를 이벤트 리스너 함수에 추가해야합니다. 

 OpenBackground.
  조정 ({x : e.pagex, y : e.pagey}).
  재생 ();

15. 여러 모양을 추가하십시오

14 단계에서 개념을 따르면 이제는 유사한 방식으로 확장을 클릭하고 일부 텍스트를 표시하는 여러 개의 색상의 원형 객체를 포함하도록 예제를 진행합니다. 기존 HTML 파일을 편집하고 본문 내의 코드를 복사하십시오. 그것은 페이지의 기본 구조를 만듭니다.

16. 도우미 라이브러리를 추가하십시오

그런 다음 일부 추가 라이브러리가 객체를 클릭 할 때 스크롤을 용이하게하고 사운드를 생성하기 위해 신체 섹션에 추가됩니다. 

& lt; script src = 'https : //cdnjs.cloudflare.com
ajax / libs / halller / 1.1.26 / howler.min.js '& gt; & lt;
스크립트 & gt;
& lt; script src = 'https : //cdn.jsdelivr.net
MOJS / 0.119.0 / mo.min.js '& gt; & lt; / script & gt;
& lt; script src = 'https : //cdn.jsdelivr.net
hammerjs / 2.0.4 / hammer.min.js '& gt; & lt; / script & gt;
& lt; script src = 'https : //cdnjs.cloudflare.com
Ajax / libs / iScroll / 5.1.1 / iscroll-probe.min
js '& gt;
& lt; / script & gt;

17. 애니메이션을 발전시킵니다

그런 다음 HTML 파일에서 강조 표시된 개별 클래스의 스타일을 추가합니다. 그런 다음 mo.js 기능이 추가됩니다. 전체 코드 (CSS 및 JS)는 검토를 위해 자습서 파일과 공유됩니다.

18. Mo.js에 대해 자세히 알아보십시오

튜토리얼에서 버블 및 블래스트 기술을 보여 주지만 학습 프로세스를 빠르게 추적하는 데 도움이되는 온라인으로 추가 자원이 있습니다. 이들 중 일부는 포함됩니다 GitHub의 Mo.js 자습서 과 GitHub에도 데모 ...에

이 기사는 원래 Creative Web Design Magazine의 291 호에 발표되었습니다. 웹 디자이너 ...에 구매 문제 291. ...에

자세히보기 :

  • CSS 아트는 오래된 브라우저에서 훌륭하게 망가졌습니다
  • 사용자 테스트 소프트웨어의 최고의 조각
  • 위대한 UI 디자인

어떻게 - 가장 인기있는 기사

Adobe XD : 자동 애니메이션 기능 사용 방법

어떻게 Sep 14, 2025

(이미지 크레디트 : Adobe) Adobe XD는 프로토 타이핑 게임에 대한 늦은 항목에도 불구하고 �..

레이어로 할 수있는 10 가지 놀라운 일

어떻게 Sep 14, 2025

Layers는 초기 기초에서 마무리 만지기로 프로젝트를 구축 할 수 있습니다. 지금 믿기가 어렵지만 �..

2D 일러스트레이션을 3D 아트

어떻게 Sep 14, 2025

내 여행 3D 아트 내 동생이 나에게 시도해 왔을 때 몇 년 전에 시작했습니다. 히�..

나쁜 엉덩이를 그립니다

어떻게 Sep 14, 2025

이 게이샤 그림에서 나는 우아한 전통적인 일본 요소로 엮여지고있는 지저분한, 어둠, 도시 분위�..

이야기를 전하는 다채로운 세계를 만드는 방법

어떻게 Sep 14, 2025

당신이 더 많은 것을 알고 싶어하고 모퉁이를 돌리고있는 것을 볼 수있는 궁금한 일을하는 상상�..

고스트 라이더 변환 시뮬레이션

어떻게 Sep 14, 2025

페이지 1 / 2 : 페이지 1 페이지 1 ..

Unreal Engine 4

어떻게 Sep 14, 2025

Unreal Engine 4를 사용하여 마지막 정지를 예로 들어, 비디오 게임 생산을위한 실시간 환경을 만들 �..

현금 흐름을 효과적으로 관리하는 5 가지 방법

어떻게 Sep 14, 2025

귀하의 현금 흐름을 통제하는 것은 프리랜서 성공의 핵심이며, 당신이 그렇게 효과적으로 당신이..

카테고리