JointJS - 多彩な図を描けるJavaScriptライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web上での表現力を向上させるためのライブラリが多数存在します。多くはグラフを描くものであったり、より複雑なチャートを描くものです。さらにWebGLを使ったり、Canvasに複雑な描画を行うものもあります。 今回紹介するJointJSはCanvas上に図形を描くのですが、JavaScriptと連携したインタラクティブな図を描けます。 JointJSの使い方 デモです。まずは回転する図形。 こんな図形も描けます。なお、緑と赤のポイントはドラッグでラインを接続できます。 各オブジェクトはマウスでドラッグできます。 図はグルーピングされていたり、コネクトされている場合は線も一緒に動きます。 デモです。赤いポイントがアニメーションしています。 パイチャートともちょっと違う図形です。 各要素
Web制作のクオリティを飛躍的に高めるJavaScriptライブラリ10選を一挙公開！ - paiza times
どうも、まさとらん（@0310lan）です。 みなさんは、「JavaScriptライブラリ」を活用しているでしょうか？ Webサイト制作はもちろんのこと、さまざまなWebアプリやサービスなどを開発する時に、大幅な時間短縮やクオリティを飛躍的にアップすることが出来るようになります。 そこで今回は、国内外で人気が高くて誰でも簡単に扱える「JavaScriptライブラリ」を厳選してご紹介しようと思います！ ■多機能な「写真ギャラリー」を組み込めるライブラリ！ ◆1.Viewer.js 複数の画像を表示する際に、オシャレな「ギャラリー風」に変換してくれるライブラリです。 類似のライブラリはいくつか存在しますが、「Viewer.js」は使い方が非常にシンプルで扱いやすいのに、多機能性も備えているスグレモノとなっています。 基本的な使い方としては、HTMLファイルに表示させたい画像を「リスト要素」で指
Google Web Designer の概要 - Google Web Designer ヘルプ
オンライン広告や動画をデザインする Google Web Designer は、視覚的なコーディング インターフェースを使用して、ビジネス向けの HTML5 広告、画像、動画などのさまざまなウェブ コンテンツをデザイン、作成できる高度なウェブ アプリケーションです。Google Web Designer のデザインビューを使用すれば、描画ツール、テキスト、3D オブジェクトを活用してコンテンツを作成し、そのすべてをタイムラインでアニメーション化できます。 コードを開発する Google Web Designer のコードビューでは、CSS、JavaScript、XML の各形式のファイルを作成できます。構文のハイライト表示機能やコード オートコンプリート機能を備えているので、コードの記述が簡単になるとともに入力ミスを減らすこともできます。 メディアとインタラクティビティを追加する Goog
Google Web Designer - Home
魅力的な動画、画像、HTML5 ベースのデザインを作成してあらゆるデバイスに配信し、ビジネスをアシスト ビジネスでの使用のみが想定されています ビジネスのアイデアを形にするための機能 Google Web Designer は、人を惹きつける美しい動画、画像、HTML5 広告を簡単に作成できるツールです。アニメーションやインタラクティブな要素を使って、クリエイティブな発想を形にすることができます。表示するスペースやオーディエンスに合わせてコンテンツの規模を調整できるように、レスポンシブ ワークフローや動的ワークフローを備えています。 モードを選ぶ アニメーションの作成には、シンプルなシーンをつなげて作るクイックモードと、タイムライン上でレイヤを使用して作る詳細モードがあります。モーションパスやカスタム イージングを使って、アニメーションを思いのままにコントロールできます。 3D 3D コン
animachine - Google Chrome上でGreenSockを使ったHTML5アニメーションを作成
GoogleがFlashバナーを自動的にHTML5に変換する広告配信技術を発表しました。これにより既存資産を活用したままモダンなWeb環境においても広告配信が可能になります。つまりHTML5でもFlash並のアニメーション表現が可能になっているのです。 そこでさらに高度なアニメーションを実現したい時に使えるのがGreenSockです。そしてGreenSockをベースにアニメーションを作成できるエディタがanimachineになります。 animachineの使い方 animachineはGoogle Chrome機能拡張で、実行するとGreenSockで作られたコンテンツ上にエディタ機能を表示してくれます。アニメーションは繰り返し実行され、任意のポイントで停止させて編集ができます。HTML5アニメーションの作成が捗ることでしょう。 animachineはHTML5/JavaScript製、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
