テキストやSVGや画像が3Dで動く！HTMLで実装した要素から3Dアニメを自動生成するスクリプト -ztext.js
普通のHTMLで実装されたテキストやSVGや画像を立体的にするためにレイヤーを自動生成し、3DのアニメーションにするJavaScriptを紹介します。 日本語や絵文字にも対応しており、アニメーションはマウス操作などに反応させることもできます。 ztext.js ztext.js -GitHub ztext.jsの特徴 ztext.jsのデモ ztext.jsの使い方 ztext.jsの特徴 ztext.jsはHTML要素からレイヤーを自動生成することで、テキストやSVGや画像を3Dにできます。CanvasやWebGLは一切必要はありません。 MITライセンスで、商用プロジェクトでも無料で利用できます。
SVGを扱えるJavaScriptライブラリまとめ
大画面モニタやRatinaディスプレイの普及により、拡大しても画像が劣化しないベクターグラフィックス（SVG）の利用が増えています。そんなSVGをJavaScriptで簡単に利用できるライブラリをまとめて紹介します。 Snap.svg Snap.svg Snap.svgはベクターグラフィックに特化し、アニメーション機能も備え、より高度にグラフィックスを操作できるライブラリです。Snap.svgは最新のブラウザ用に設計されていますのでマスキング、クリッピング、パターン、フルグラデーション、グループ機能など最新のSVGの機能をサポートしています。Snap.svgを導入することで、より自在にSVGを扱えるようになるのではないでしょうか。 Snap.svg jQueryライクな操作 svg.js svg.js svg.jsはjQueryライクに操作できるSVGライブラリです。圧縮時は約53kb程度
アニメーションやグラフ等、SVGを使ったJavaScript＆jQueryプラグイン11
アニメーションやグラフ等、SVGを使ったJavaScript＆jQueryプラグイン11今やCSSだけでも多彩なアニメーションを取り入れることができますが、JavaScriptとSVGを使うことで、より美しく自由度のきく表現が可能です。今回はSVGを使った、便利なJavaScriptライブラリーやjQueryプラグインを紹介します。 Web サイト｜GitHub｜デモ SVG のパスを使ってラインをアニメーションさせるためのプラグイン。2kb と軽量です。デモ画面右下の「RETURN」ボタンをクリックして試してみてください。 var mySVG = $("#my_svg_element").drawsvg(); で要素を指定し、 mySVG.drawsvg("animate"); で実行させるだけの手軽さ。オプションを指定してスクロールする毎にラインを描くといった効果も実装できます。 2.
canvg.js·SVGをパースしてCanvas上に描画 MOONGIFT
HTML5になってから新しく出てきたグラフィックス要素にSVGとCanvasがあります。Canvasはバイナリとして生成され、SVGはベクターデータでありその使い分けはできるでしょう。しかし逆にSVGデータをCanvas内に描画したい時もあるはずです。 そこで使ってみたいのがcanvg.jsです。SVGデータをパースし、Canvas内に描画してくれるライブラリです。 canvg.jsの使い方 サンプルです。右側が素のSVG、左側がcanvg.jsによる出力です。 テキスト出力の再現度も高いです。 こんな細かい帳票も再現できます。 カラーリングにも対応。 canvg.jsはさらにオブジェクトを描画したり、アニメーションにも対応しています。SVGをSVGのままだけでなく、Canvasと組み合わせることでゲームに使ったり、編集不可のデータを生成したりするのに使えそうです。 canvg.jsはJa
Polylion | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. The following is a guest post by Dennis Gaebel. Dennis created some pretty captivating polygon SVG effects on CodePen, and here he’ll share how he did it. Sometimes the things you least expect, gain the most attention as the case was with the Polylion I posted on CodePen. I figured the simplicity o
Walkway.js·SVGコンテンツを取得して自動アニメーション MOONGIFT
HTML5が正式勧告になり、SVGの利用も今後ますます広がっていくものと思われます。ベクターベースのドローができるので拡大表示したとしても綺麗に描けるのが特徴です。さらにもう一つ、アニメーションが書けるというのも特徴です。 とはいえSVGアニメーションを作るというのはそうそう簡単ではありません。もうちょっとシンプルなアニメーションでよければ、Walkway.jsを使ってみるのはいかがでしょう。 Walkway.jsの使い方 Walkway.jsを使ったサンプルです。できあがったSVGから、アニメーションを自動生成しています。 Walkway.jsの場合、すでにあるSVGファイル（が入ったHTML）からアニメーションを生成しています。それだけに作るのは簡単と言えそうです。あまり複雑なドローを描くのは難しそうですが、グラフや簡単なオブジェクトであればアニメーションしながら綺麗に描いてくれるので
Chartist – レスポンシブ対応のSVGグラフライブラリ
Webは表現力が弱いと言われていますが、特にグラフ周りで苦労することが多いのではないでしょうか。データを単純に一覧表示するのではなく、グラフを用いることでトレンドを知ったり、よりビジュアル的に把握できるようになります。 そこで今回は最新のグラフライブラリ、Chartistを紹介します。SVGで描かれたレスポンシブなグラフライブラリです。 Chartistの使い方 シリーズをJavaScriptの配列で与えるだけ。とても簡単ですね。 ChartistはSVGでグラフを描き、スタイルシートでビジュアルを調整できます。さらにレスポンシブに対応することで幅によってラベルの表示を変更するようになっています。対応ブラウザはIE9以降となっています。 ChartistはJavaScript製のソフトウェア（ライセンスはWTFPL）です。 Chartist - Simple responsive char
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
