수업소개
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>
