マウススクロールで「SVGグラデーション」を動かそう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのドリルです。 今回はマウススクロールで、SVGグラデーションを動かすというアニメーションをご紹介します。 SVGについてもしご存知なければ、ぜひこちらの記事をご参照ください。 SVGグラデーションの配置 HTML 横200px、縦200pxの四角形を描画しています。 linearGradient要素のx1、y1はグラデーションの始点、x2、y2はグラデーションの終点です。この場合、四角形の左上から、右下にかけてグラデーションさせています。 色に関しては、始点は赤、終点は青に設定しています。 四角形の塗りは、g要素、fill属性の中に、linearGradient要素のidを記述することで、グラデーションが適応されます。 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"> <def
zPath.js - SVGをアニメーションしながら描画 MOONGIFT
SVGの良いところはベクターベースのデータである点と、内容がXMLなのでプログラマブルに操作可能ということです。バイナリデータと異なり、一部だけを描画したり色を変えると言ったことも簡単にできます。 そこで使ってみたいのがzPath.jsです。SVGを読み込んでアニメーションしながら描画してくれます。 zPath.jsの使い方 一例。速度も制御できます。 描き方も変更できます。 zPath.jsを使えばロゴなどもアニメーションするように指定できます。これまでは動画やアニメーションGIFを使うしかありませんでしたが、zPath.jsを使うことでSVGを使う利点が生まれそうです。 zPath.jsはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 zPath.js Demo Zet-Tools/zPath.js: A jquery plugin
flowchart.js - SVGのフローチャートを生成するJavaScriptライブラリ MOONGIFT
システムやワークフローを分かりやすく説明する際にフローチャートを使うことがあります。特に業務システムなど、多数のシステムが複雑に組み合わさって処理が実行される場合、きちんと可視化されているかどうかで結果が大きく変わる可能性があります。 Excelで仕様書を書いているとExcel上で完結しそうです。しかしこれでは検索性やメンテナンス性がよくありません。そこで仕様書をMarkdownやHTMLで書いているならばflowchart.jsを使ってみましょう。 flowchart.jsの使い方 flowchart.jsのデモです。専用の記述方法に沿って書くことで、右側のようなフローチャートが生成されます。URLがあるところはクリッカブルになっています。 さらにカラーリングの指定もできたり、縦ではなく横に広がっていく形にもできます。 flowchart.jsはSVGで生成しているのがポイントで、元文書
SVGでグラフを描くJSライブラリ「gRaphael」
gRaphael - Charting JavaScript Library (Dmitry Baranovskiy) SVGで使って様々なグラフを描く、JavaScriptライブラリ「gRaphael」が公開されています。 (英語) SVGをJavaScriptから扱えるライブラリ「Raphael」がベースになっているようです。 ライセンスはMITのようです。
ブラウザ上で動くSVGグラフィックエディタのオープンソースが超凄い:phpspot開発日誌
SVG-edit ブラウザ上で動くSVGグラフィックエディタのオープンソースが超凄いです。 次のようなインタフェースで、Chromeだとサクサク動くSVGエディタがGoogle codeにてオープンソースでダウンロード可能です。 SVGでお手軽にお絵かきしたい場合や、SVGなお絵かきサイトなんかを作るのにも活用できそう 描画したグラフィックをSVGに変換した例。ツールバーからそのまま出力可能です。 次のようなXMLデータになります。 触ってみるだけでも価値がありそうです。 関連エントリ JavaScriptでFlashやSVGを使わない3Dアニメーション PHPでベクターグラフィックスを作成するためのチュートリアル テキストで描画されたSVGグラフィックス
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
データを可視化する為のグラフ描画JavaScriptライブラリをまとめた・「JSGraphs」 - かちびと.net
SVGグラフィックを華麗にアニメーションさせられる「vivus.js」:phpspot開発日誌
HTML5などを使ったアニメを作成できる「Adobe Edge」のプレビュー版が無償公開
