수업소개
mojs는 적은 코드로 만족할만한 모션그래픽 효과를 만들 수 있는 자바스크립트 라이브러입니다.
사용기술
참고
미리보기
수업
예제 - mojs.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!doctype html><html> <body> <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | <!doctype html><html><body> <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> |
