HTML要素をグラフィカルにアニメーション化できるJavaScriptライブラリ「Theatre.js」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、HTML要素を簡単にアニメーション化できるJavaScriptライブラリをご紹介します。 初期設定はJavaScriptで書きますが、実際のアニメーション作りに関してはタイムラインエディタを利用した直感的な操作で実現しているのが大きな特徴です。ちょっとしたインタラクションから3Dアニメーションまでカバーできるライブラリなので、ご興味ある方はぜひ参考にしてください！ 【 Theatre.js 】 ■「Theatre.js」の導入について！ それでは、「Theatre.js」をどのように使えばいいのか詳しく見ていきましょう！ 既存のWebサイトへ「Theatre.js」を導入する方法はいくつかあるのですが、今回はもっとも基本的な手段としてCDN経由でライブラリを読み込んでみます。これはHTMLファイルが1つあれば完結するので、ちょっと試して
W3Schools.com
W3Schools offers a wide range of services and products for beginners and professionals, helping millions of people everyday to learn and master new skills. Free Tutorials Enjoy our free tutorials like millions of other internet users since 1999
本当は怖い HTML5 Canvas の Retina対応 - Qiita
<canvas id="sample_canvas" width="640" height="800" style="width: 320px; height: 400px"></canvas> これで、Retinaディスプレイできれいに表示できる。 しかし、このままでは以下のような問題が起きちゃう。 2倍のサイズのCanvasに描画を行うため、処理が重くなる そのため 一部のAndroid端末にて、ブラウザが落ちる、端末が発熱する 一部のAndroid端末にて、Canvas要素のstyle属性を動的に変更するとブラウザが落ちる そこで、Retina以外の端末向けに、処理の切り分けが必要になる。 Canvas要素は実際のサイズ。Canvas上の座標系をあわせるために、 Canvasのscaleを0.5にする。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
