jQuery DrawSVGはSVGのpathにアニメーションエフェクトを付与する為のスクリプトです。jQueryに依存しています。書いたpathにstroke-dasharrayプロパティとstroke-dashoffsetプロパティを差し込んで手軽にアニメーションにしよう、というもの。別途easingプラグインを使うことでeasingにも対応可能です。圧縮版で1kbを切るほどの軽さなので手軽に使えそうですね。ライセンスはMIT。 jQuery DrawSVG

こんにちは、ユーリです! 少し前、SVGでアニメーションを行う記事を書きましたが、 その後の開発でブラウザ間の挙動の違いや、古いブラウザでうまく動かなかったりと色々と苦労いたしました。 うおー、やはり一定数の古い環境は切り捨てるしかないのかッ…!対応コードを書けば書くほど煩雑になってゆく! そこに現れた救世主!! SVG制御用ライブラリ… Raphael.js っ!! ↓さんぷる 自前のコードだけでの対応に限界を感じ、ライブラリを使用してめんどくさいところは全部吸収してもらうことにしました。 まさにうってつけのライブラリが見つかりました! それがraphael.jsでございます。 raphael.jsのココがスゴイ! ■IEやsafqriの古いバージョンでも動作 特に何も意識せずとも、raphael.jsからの処理を使ってSVGを操作すれば、古いブラウザでもしっかり表示され、animate
こちらは、最近流行りのSVG!gif画像ではありません。 クリックして色を変えるなどの処理がリアルタイムで行えます。 IEやsafariなど一部のブラウザではうまく動作しないかもしれません。ゴメンナサイ。 これをjavascriptで制御しようとしたところ、いろいろ大変だった話。 ※この記事は、SVGが動作する環境の方へ向けて書いています。動かない方はゴメンナサイ。 SVGは、ドットの集まりではなく、パス(点と線)の集まりである為、解像度は無限大です! また、パスの値は数値で書かれていて、ページが表示されてからでも、パスの値を調節すれば、見た目をぐにぐに変えちゃったりもできます! ただし、現時点ではブラウザによって対応していない環境があったり、大きさの指定がややこしかったりと、いろいろ課題もございます。 今回は、どうしてもSVGをぬるぬる動かしたい!という案件がございまして、工数はかかりま
『JavaScript: The Good Parts』で紹介されている標準メソッドまとめ JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティスは、JavaScriptの「良いパーツ」のみを厳選した、JavaScriptを書く人なら一度は読んでおきたい 良書です。したがって、ここで紹介されている標準メソッドは、積極的に取り入れるべきメソッドです。 「車輪の再発明はするな」とはよく言われることですが、標準APIに詳しくなることで普段書くJavaScriptもかなりきれいにまとまって書けるようになります。 本記事では省いているRegExpやNumberの節、または標準メソッド以外のJavaScriptの「良いパーツ」に興味が出た方は、一度本書を手にとって見てみてください。 「JavaScriptは言わばひとかたまりの大理石であり、私はその中からこの言語
The eager-loading for image files on the web page that loads the files according to your plan. This differs from the lazy-loading, for example, this can be used to avoid that the user waits for the loading. Start Sample The loading image files in these samples is deliberately slowed to show you the behavior. Lazy-Loading vs. Eager-Loading The lazy-loading is very useful for the user which left you
新しいWeb開発フレームワークも登場! 2015年中に人気が急上昇してきており、「2016年では必須の知識」となりそうなJavaScriptライブラリをランキング形式で発表する。 ← 前回 連載 INDEX 2016年が始まり、心機一転で「今年こそはWeb開発を頑張ろう」と思っている人も少なくないだろう。そんな方々に向けて本稿では、2015年中に人気が急上昇してきており、「2016年では必須の知識」となりそうなJavaScriptライブラリをランキング形式で発表する(※昨年の2015年版はこちら)。 なお、本稿のランキング決定では、検索キーワードの流行を調査可能な「Googleトレンド」(「すべての国」「過去 12 か月間」「コンピュータ、電化製品」「ウェブ検索」という条件で絞り込み)を使って、ライブラリの人気をジャンルごとに比較した(※ライブラリ名が一般的な英単語の場合、Web検索時に、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く