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

수업소개

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

사용기술

참고

미리보기

수업

예제 - 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>