caman.js,SoundManager2.js,CSS3 Animations

1. CamanJS,
SoundManager 2 JS,
CSS Animations
2015/10/16
李佳駿

2. CamanJS
1.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/

3. 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>

4. CamanJS
HTML:
<img class="#image-id" src="image/img.jpg">
JavaScript:
Caman("#image-id" , function () {
this.resize({
width: 104
});
this.brightness(-40);
this.render();
});

5. CamanJS
HTML:
<img class="#image-id" src="image/img.jpg">
JavaScript:
Caman("#image-id" , function () {
this.resize({
width: 104
});
this.revert();
this.render();
});

6. CamanJS
http://camanjs.com/examples/
http://css3pie.com/

7. SoundManager 2 JS
1. 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.

8. 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();

9. Internet ExplorerInternet Explorer
Not support Audio APINot support Audio API

10. SoundManager 2
<script src="js/soundmanager2.js"></script>

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

12. SoundManager 2
soundManager.stop("aSound");
soundManager.play("aSound");
soundManager.stopAll();

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

14. 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;
}
}

15. 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;
}

16. CSS3 Animations
HTML:
<div class="AnimationMain"> </div>
JavaScript:
$(".AnimationMain").addClass("Animation");

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