CamanJS,SoundManager 2 JS,CSS Animations

2015/10/16李佳駿

CamanJS1.CamanJS is canvas manipulation

2. Advanced and efficient image/canvas editing techniques.

3. It comes with a wide array of image editing functionality

4. It's completely library independent and works both in NodeJS and the browser.

Why use CamanJS

http://css3.bradshawenterprises.com/filters/

CamanJS <script src="https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js"></script>

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>

CamanJS HTML:

<img class="#image-id" src="image/img.jpg">

JavaScript: Caman("#image-id" , function () { this.resize({ width: 104 }); this.brightness(-40); this.render(); });

CamanJS HTML:

<img class="#image-id" src="image/img.jpg">

JavaScript: Caman("#image-id" , function () { this.resize({ width: 104 }); this.revert(); this.render(); });

CamanJS http://camanjs.com/examples/

http://css3pie.com/

SoundManager 2 JS1. SoundManager 2 makes it easier to play audio using JavaScript.

2. SoundManager 2 gives you a single, powerful API that supports both new and old

3. using HTML5 audio where supported and optional Flash-based fallback where needed.

Html5 Audio API HTML:

<div id="audio-clips">

<audio src="/audio/cha-ching.wav" type="audio/wav" id="audio-cha-ching"> </div>

JavaScript:var sfx = $("# audio-cha-ching ")[0]; sfx.play();

Internet Explorer Internet Explorer Not support Audio APINot support Audio API

SoundManager 2

<script src="js/soundmanager2.js"></script>

SoundManager 2 soundManager.setup({ url: 'js/soundmanager2.swf', onready: function () { var mySound = soundManager.createSound({ id: 'aSound', url: 'music/win.mp3' }); }, ontimeout: function () { } });

SoundManager 2 soundManager.stop("aSound");

soundManager.play("aSound");

soundManager.stopAll();

CSS3 Animations CSS3 animations allows animation of most HTML elements without using JavaScript or Flash!

CSS3 Animations/* CHROME, SAFARI, OPERA */

@-webkit-keyframes play { from { background-position: 0px; } to { background-position: -11088px; } }

/* IE9 IE10 */

@keyframes play { from { background-position: 0px; } to { background-position: -11088px; } }

CSS3 Animations .Animation {

width: 528px;

height: 400px;

background: url("image/effect_con.png") no-repeat;

-webkit-animation: play 1.65s steps(21) forwards;

animation: play 1.65s steps(21) forwards;

}

CSS3 Animations HTML:

<div class="AnimationMain"> </div>

JavaScript:

$(".AnimationMain").addClass("Animation");

Challenge https://www.youtube.com/watch?v=FwW6LtSUUOk