【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

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

関連記事

【WP】モバイル端末用にテーマを切り替えるプラグインのまとめ

先日のGoogleのウェブマスター向け公式ブログ「検索結果をもっとモバイルフレンドリーに」の記事にもあったように、モバイル端末によるウェブサイトの利用がシェアを伸ばしてきていることでウェブサイトのモバイル端末への最適化も重要な課題になってきていると思われます。 今回は、...続きを読む

2015.03.20WordPress

D-SALON様WEBサイトのデザイン提案

美容室のD-SALON様のWEBサイトのリニューアルにおけるデザイン提案をいたしました。WEBサイトのリニューアルのご提案において、従来のWEBサイトより、ふんわりとした女性らしく可愛らしいイメージでデザインをいたしました。 お店の特徴やPRしたい内容をバナーとして掲載し、...続きを読む

2019.04.15WEBデザイン美容室

Googleウェブマスター向けの情報からみるSEOの必要性について

WEBサイトの制作において、お客様よりSEOについての相談、要望をいただくことがあります。 またSEOを専門に行っている業者で、どの業者を選んでよいかわからないといった相談もありました。 今回は、Googleよりウェブマスター向けに公開されている記事で、SEOについて...続きを読む

2015.02.14SEO

【CSS】互い違いに行の色を変えるテーブルデザイン

CSS3では、nth-childの疑似クラスが定義されて、CSSだけで、テーブル<table>デザインをよりわかりやすく設計することができるようになりました。 nth-child(n)では、n番目の子となる要素にスタイルを適用することができるため、&...続きを読む

2015.02.08HTMLコーディング

【WP】空き状況を表示するカレンダーを作成することができるBookingプラグイン5選

レストランやホテル、イベント会場などWEBサイトで、席の空き状況をカレンダーに表示して予約をスムーズに行う仕組みを見かけることがあると思います。 この空き状況を案内するカレンダーをWordPress上で作成することができるプラグインがありますのでご紹介します。 今...続きを読む

2015.02.26WordPress