はてなブックマーク

少し前に、アニメーション最強のVelocity.jsの使い方という記事を書きましたが、対抗馬となるanime.jsが出てきたので使ってみました。 anime.jsとは？ 高機能かつ軽快なアニメーションする軽量ライブラリです。 Velocity.jsと違い、jQueryの$.animateと互換性はありませんが、記述方法が分かりやすくカンタンに導入できると思います。 なお、アニメーションは、Velocity.jsと同様にrequestAnimationFrameベースで動作させており、スムーズにアニメーションされます。 容量 Velocity.jsと比べると、anime.jsの方が軽いですね。 velocity.min.js : 34.4 KB anime.min.js : 9.21 KB 記述方法 はい、これで動きます。（右に100px移動） カンタンですね。

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

はじめに 今話題のVelocity.jsについて初歩の初歩だけまとめました。 ※追記：↓対抗馬のanime.jsについて記事書きました※ アニメーションライブラリ決定版か!?anime.jsで軽量・軽快に実装！ Velocity.jsとは jQueryのプラグイン。 $.animateと互換性を持ち、さらに高機能で非常に軽快なアニメーションをする。 アニメーション技術補足 jQuery Animation 便利だが重い。コマ落ちし過ぎ。 CSS Transition, CSS Animation 軽いが、アニメーションを繋ぐなどが出来なかったりなど使い勝手が悪い。 結局、JavaScriptを頼らないと使い物にならないことが多い。 Transit.js 有名なアニメーションライブラリのひとつであるjQueryプラグイン。 CSS Animationを制御しているため、軽快。 そして、3d-

$(function() { // unsupported. if (!'SpeechSynthesisUtterance' in window) { alert('Speech synthesis(音声合成) APIには未対応です.'); return; } // 発話機能をインスタンス化 var msg = new SpeechSynthesisUtterance(); var voices = window.speechSynthesis.getVoices(); $('#btn').on('click',function() { // 以下オプション設定（日本語は効かないもよう。。） msg.voice = voices[7]; // 7:Google 日本人 ja-JP ※他は英語のみ（次項参照） msg.volume = 1.0; // 音量 min 0 ~ max 1 msg

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?