【JavaScript】国産ライブラリtmlib.jsを使ったアニメーション入門

introductory-javescript-tmlib

「tmlib.js」はゲームやブラウザツールを簡単に作る事ができる国産のJavaScriptライブラリです。「tmlib.js」を使うとアニメーションや画像表示、サウンドなどゲームなどに必要な処理がプログラミングしやすいようになります。

WEBサイトなどにもアニメーションやクリックしてアクションを起こすなど新しい要素をして取り入れてみても面白そうです。国産のライブラリなのでサンプルなども日本語で多く公開されています。

ダウンロード

「tmlib.js」のライブラリはこちらからダウンロード(GitHub)することできます。

基本的な使い方

使い方はシンプルに「tmlib.js」をscriptタグで読みこみ処理するコードを書くだけです。

<script src="tmlib.js"></script>
<script>
// TODO: ここにコードを書いていく
tm.main(function() {
alert("tmlib.js バッチリ読み込まれてるよ!!");
});
</script>

チュートリアルやサンプルなど公式サイトより紹介されておりますので参考になります。

ひよこアニメーション – tmlib.js – 0.1.7

ひよこをクリックすると絵柄が変わりアニメーションに切り替わります。

関連記事

画像・動画の素材サイト 「PIXTA」で写真を販売しています

画像・動画の素材サイト 「PIXTA」で写真を販売しています。桜やコスモス、紅葉など自然の花々、風景を中心に公開中です。 また、写真撮影のご依頼も受け付けておりますので、ホームページや各種印刷物にて写真が必要になる場合は、お気軽にご相談ください。 PIXTA 写...続きを読む

2019.04.15

【WP】WordPressテーマファイルのページ階層早見表

WordPressでサイト構築するために必須となるテーマ。初めてWordPressのテーマのファイルをみるとそれぞれのファイルがどのように関連してサイトが構築されているのか難しく感じるかもしれません。 テーマをカスタマイズしたいとき、テーマを利用したいとき、テーマをより深く...続きを読む

2016.07.03WordPress

【CSS】リンクフォーカスを利用したナビゲーションのボタン操作

CSSの{a:hover}を使うとマウスオーバーの操作によって背景の色や画像を変えることができます。ナビゲーションメニューなどによく使われる手法ですが今回は{a:focus}に着目してみました。 {a:focus}はリンクにフォーカスされているとき。クリックされた時やT...続きを読む

2015.02.08HTMLコーディング

【WP】プラグイン『Photospace』の利用方法

以前に紹介をした『Photospace』は、jQueryのサムネイル付のスライドショーギャラリーを実装できる「Galleriffic」を、WordPressの標準ギャラリーのショートコードに対応させることができるプラグインです。インストールと標準設定をご紹介しましたが、今回は...続きを読む

2015.06.29WordPress

美容室ヒュッゲ様WEBサイト制作

静岡県富士市にある『美容室ヒュッゲ』様のWEBサイトを制作いたしました。お店のナチュラルな雰囲気と、手書きのかわいらしいロゴに合わせて、水彩調のイラストやレースなどを用いてかわいらしいデザインをしました。ヘアギャラリーやスタッフブログなどCMSによる更新コンテンツも充実したホ...続きを読む

2019.06.14WEBサイト制作美容室