mo.js

mo.js는 자바스크립트 애니메이션 플러그인 입니다. mo.js를 이용하면 애니메이션을 쉽고 퀄리티 있게 구현 할 수 있습니다.

• mo.js 사이트 : mojs.io
• mo.js로 만든 사이트 : www.cartoonnetworkstudios.com
• mojs-master.zip

Sample1 클릭하면 움직이는 기본 예제입니다.

Mojs

Click

<script type="text/javascript">
	//sample1
	var circle1 = new mojs.Html({
		el: '.circle1',
		x: { 0: '600'},
		duration: 1000,
		easing: 'cubic.in'
	});

	$(".btn1").click(function(){
		circle1.play();
	});
</script>

Sample2 클릭하면 크기가 작아지는 애니메이션입니다.

Mojs

Click

<script type="text/javascript">
	//sample2
	var circle2 = new mojs.Html({
		el: '.circle2',
		x: { 0: '600'},
		duration: 1000,
		easing: 'cubic.in',
		scale: { 1 : 0.5 }
	});

	$(".btn2").click(function(){
		circle2.play();
	});
</script>

Sample3 클릭하면 보더 속성 값을 변경하는 예제입니다.

Mojs

Click

<script type="text/javascript">
	//sample3
	var circle3 = new mojs.Html({
		el: '.circle3',
		x: { 0: '600'},
		duration: 1000,
		easing: 'cubic.in',
		borderStyle: 'solid',
		borderWidth: { 0: 20 },
		borderColor: { '#880e4f': '#4a148c' }
	});

	$(".btn3").click(function(){
		circle3.play();
	});
</script>

Sample4 여러가지 Shape 속성을 설정합니다.

<script type="text/javascript">
	//sample4
	var circle4_1 = new mojs.Shape({
		parent:'.circle4',
		shape: 'circle',
		left: '60',
		radius: 30,
		strokeWidth: 0,
		isShowStart:  true
	});
	var circle4_2 = new mojs.Shape({
		parent:'.circle4',
		shape: 'circle',
		left: '160',
		radius: 30,
		strokeWidth: 5,
		stroke: '#bbdefb',
		fill: '#42a5f5',
		isShowStart:  true
	});
	var circle4_3 = new mojs.Shape({
		parent:'.circle4',
		shape: 'circle',
		left: '300',
		radius: 30,
		radiusX: 50,
		strokeWidth: 7,
		stroke: '#0d47a1',
		fill: '#fff',
		isShowStart:  true
	});
	var circle4_4 = new mojs.Shape({
		parent:'.circle4',
		shape: 'circle',
		left: '450',
		radius: 30,
		radiusY: 40,
		strokeWidth: 0,
		fill: 'deeppink',
		isShowStart:  true
	});
	var circle4_5 = new mojs.Shape({
		parent:'.circle4',
		shape: 'rect',
		left: '600',
		radius: 30,
		radiusX: 40,
		strokeWidth: 0,
		fill: '#006064',
		isShowStart:  true
	});
	var circle4_6 = new mojs.Shape({
		parent:'.circle4',
		shape: 'polygon',
		left: '750',
		radius: 30,
		radiusY: 40,
		strokeWidth: 0,
		fill: '#1b5e20',
		isShowStart:  true
	});
</script>

Sample5 여러가지 Shape 속성을 설정합니다.

<script type="text/javascript">
	//sample5
	var circle5_1 = new mojs.Shape({
		parent:'.circle5',
		shape:'zigzag',
		points:11,
		radius:35,
		radiusY:50,
		left:'60',
		fill:'none',
		stroke:'deeppink',
		isShowStart:  true
	});
	var circle5_2 = new mojs.Shape({
		parent:'.circle5',
		shape:'curve',
		points:11,
		radius:35,
		radiusY:50,
		left:'160',
		fill:'none',
		stroke:'deeppink',
		isShowStart:  true
	});
	var circle5_3 = new mojs.Shape({
		parent:'.circle5',
		shape:'cross',
		points:11,
		radius:35,
		radiusY:30,
		left:'260',
		y: '-25',
		fill:'none',
		stroke:'deeppink',
		isShowStart:  true
	});
</script>

Sample6 요소의 위치를 랜덤으로 설정합니다.

<script type="text/javascript">
	//sample6
	var circle6 = new mojs.Shape({
		parent:'.circle6',
		shape: 'circle',
		radius: 30,
		strokeWidth: 0,
		isShowStart:  true,
		shape: 'circle',
		x:'rand(-350, 350)'
	});
</script>