겁나 빠른 웹 레시피

mojs - 모션그래픽 라이브러리

수업소개

mojs는 적은 코드로 만족할만한 모션그래픽 효과를 만들 수 있는 자바스크립트 라이브러입니다. 

사용기술

참고

http://mojs.io/

미리보기

수업

예제 - mojs.html

<!doctype html>
<html>
  <body>
    <script src="http://cdn.jsdelivr.net/mojs/latest/mo.min.js"></script>
    <script>
      var c1 = new mojs.Shape({
        shape:'circle',
        radius:{0:'rand(10,50)'},
        left:0,
        top:0,
        x:0,
        y:0,
        fill:'yellow',
        stroke:'tomato',
        strokeWidth:'rand(1,10)',
        duration:'rand(200,2000)',
        delay:0
      });
      document.addEventListener('click', function(e){
        c1.generate().tune({x:e.pageX, y:e.pageY}).replay();
      });
    </script>
  </body>
</html>

예제 - mojs_demo1.html

<!doctype html>
<html>

<body>
  <script src="http://cdn.jsdelivr.net/mojs/latest/mo.min.js"></script>
  <script>
    var first = new mojs.Shape({
      shape: 'circle',
      radius: {
        0: 40
      },
      stroke: 'cyan',
      strokeWidth: {
        20: 0
      },
      fill: 'none',
      left: 0,
      top: 0,
      duration:300
    });
    var seconds = [];
    var colors = ['deeppink', 'magenta', 'blue', 'tomato'];
    for (var i = 0; i < 4; i++) {
      var second = new mojs.Shape({
        parent: first.el,
        shape: 'circle',
        radius: {
          0: 'rand(10,30)'
        },
        stroke: colors[i],
        strokeWidth: {
          10: 0
        },
        fill: 'none',
        left: '50%',
        top: '50%',
        x:'rand(-50, 50)',
        y:'rand(-50, 50)',
        delay:250
      });
      seconds.push(second);
    }

    document.addEventListener('click', function (e) {
      first.tune({
        x: e.pageX,
        y: e.pageY
      }).replay();
      for(var i=0; i<seconds.length; i++){
        seconds[i].generate().replay();
      }
    })
  </script>
</body>

</html>

 

댓글

댓글 본문
  1. 악당이기자
    여기부터 어렵네
  2. jeisyoon
    2021.07.10 Motion Graphic Library (mojs) - OK
  3. ㅇㅇ
    cdn주소가 바꼈나여?
  4. 고스트프리
  5. Lsalute
    mojs url이 바뀐거 같네요. 들어가도 사이트가 안떠욤
  6. Leos
    강좌 감사합니다. 해당 mojs 속성값들이 어떤것이 있는지 연구하면 좋은것들 만들수 있겠네요.

    꼭 영상 프로그램을 이용하지 않더라도요.
  7. 엄태성
    이제막 사이트보면서 일일이 공부하려고했는데
    이런게 있었군요 ㅎㅎ
    덕분에 쉽게 공부할수있을거같아요~
    정말 감사합니다~
  8. 꼬꼬마
    인상적인강좌 쉽게풀어주셔서 이해한번에 됫습니다 감사합니다.
  9. Nudger
    아참, 공동공부 참여를 클릭해서 진행상황을 보는게 [ 커버 페이지 ] 에서만 가능하던데, 각 토픽창에서 바로 볼 수 있게 해주시면 안될까요 ㅎㅎ
  10. Nudger
    너무 감사합니다 :)