Upload
learningtech
View
262
Download
0
Embed Size (px)
Citation preview
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