[JS]SVGを使ったアニメーションが楽しい、回転する新感覚のナビゲーションを実装するスクリプト -wheelnav.js
demo: pie menu アイコンをクリック（タップ）すると、バウンドしながらパイ状に広がります。省スペース用のシェアボタンとかにしてもよさそうです。 wheelnav.jsの使い方 Step 1: 外部ファイル 当スクリプトとRaphaël.jsを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="js/required/raphael.min.js"></script> <script type="text/javascript" src="js/required/raphael.icons.js"></script> <script type="text/javascript" src="js/dist/wheelnav.js"></script> </head> Step 2: HTML ナビゲーションを
![[JS]SVGを使ったアニメーションが楽しい、回転する新感覚のナビゲーションを実装するスクリプト -wheelnav.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/302021738966caaf051fa35a7a6c058cd7935a66/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015022401.png)
SVGを使いこなすための便利ツールいろいろ
2015年1月28日 SVG, 便利ツール SVG（Scalable Vector Graphics）はIllustratorで作成したようなベクター画像を表示する技術。高解像度ディスプレイでもくっきりはっきり表示できるので、近年海外サイトを中心に見かける機会が増えてきました。SVGについてはWebクリエイターボックスでも何度か取り上げてきたので、耳にしたことのある方も多いかと思います。今回はそんなSVGを使いこなすための便利なオンラインツールやJavaScriptなどを紹介します。SVGってなんぞや？という方は、過去記事「アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう」をご覧ください！ ↑私が10年以上利用している会計ソフト！ ラスター画像をSVGに変換 Vector Magic Vector MagicはJPEG、GIF、PNG形式の画像をベクター画像に変換し、EPS
SVGモーフィングで、図形を徐々に変化させてみよう
2015年12月28日 SVG モーフィングとは、ある図形から別の図形へと自然に変形するように中間の画像を補正して映像を見せる技法です。Flashでは「シェイプトゥイーン」でモーフィングを表現していましたね（懐かしい！）。CSS3のアニメーションだと、画像の移動・回転なんかはできちゃいますが、形そのものを変形させるのは難しいです。SVGを使えば、そんなアニメーションも作成可能！さっそく挑戦してみましょう！ ↑私が10年以上利用している会計ソフト！ 追記（2015年12月28日）：SMILはSVG次期バージョンから非推奨となるようです。 Intent to deprecate: SMIL – Google Groups SVGモーフィングを使った例 SVGモーフィングとはなんぞや？ってことで、まずは以下の作例をご覧ください。徐々に変化していく様子がおもしろいですね！ リンク先ではバットマンの
[JS]SVGを使った滑らかで美しいアニメーションのプログレスバーを簡単に実装できるスクリプト -ProgressBar.js
Custom Shaped Path: 最後はパスを設定して描きます。 ProgressBar.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... <script src="js/progressbar.js"></script> </body> Step 2: HTML 一つ目のデモ「Line」を例に。 プログレスバーを配置する要素をdivなどで用意します。 <div class="example-container" id="example-line-container"></div> Step 3: JavaScript 「Line」を描くには下記のように指定します。 var element = document.getElementById('example-line-container'); var line = new
![[JS]SVGを使った滑らかで美しいアニメーションのプログレスバーを簡単に実装できるスクリプト -ProgressBar.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/bf1acaeed0e4459fde1bd723379666670b18a628/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014102006.gif)
SVGの特集記事 - os0x.blog
gihyo.jpにて、SVGについての全4回の集中連載を始めました。 特集：スタートアップ SVG｜gihyo.jp … 技術評論社 第1回はSVGの基礎知識について。最初なのであまりSVG自体は出てこないですが、そもそもSVGってどうやって扱えばいいのかって話をメインに書きました。 SVGについて勉強初めてから日は浅いのですが、入門的な紹介(特にJavaScriptと絡む部分について)があまり見当たらなかったので自分で書いてみることにしました。 ややネタばらしにはなりますが、参考にしているのはAn SVG Primer for Today's Browsersとid:polynityさんの(PDF)SVG実習マニュアルがメインです。 他には Pike's SVG Tutorial 良くまとまってる。どうでもいいけど、作者は日本に留学中(ただ4,5年前の話なので今は違うと思われる)のカナダ
【ハウツー】フルブラウザ対応SVGアプリケーション『SVG-edit』の使い方 (1) SVGに普及のきざし | エンタープライズ | マイコミジャーナル
SVGに普及のきざし A complete vector graphics editor in the browser ブラウザにおける2Dベクターグラフィックの利用にSVGが普及する気配を見せている。SVGは登場してからだいぶ経つが、Webコンテンツにおける主要なデータフォーマットのひとつとはいえない状況にある。 しかしHTML5でHTMLページに組み込むことが可能になること、IE9でサポートされる可能性が出ていること、IE以外の主要ブラウザですでに利用できること、グラフィックアプリケーションでの対応が進んでいること、といった状況があり、今後普及を見せる可能性がある。 SVGがWebに適している9つの理由 IE9のSVGサポート、固い路線 SVGとCanvasのどちらを使うべきか考える SVGを扱うことができるグラフィックアプリケーションは多い。中でも最近注目されはじめているアプリケーシ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
テキストをCSSやSVG等でアニメーションさせるやばいサンプル集:phpspot開発日誌
よくあるWebデザインにSVGで一手間加え、さまざまな要素がアニメーションで楽しくなる -Elastic SVG Elements
CSSやSVGで実装するローディングアニメーション - NxWorld
オンラインでSVGの作成が出来るツール「svg-edit」 - 強火で進め