実戦で使える本格的なSVGアニメーションを作る - The future starts today
SVGのアニメーションって綺麗だし、カッコいいですよね。 海外のサイトだったり、dribbbleではよく見るのですが、日本のサイトでは凝ったアニメーションはあまり見かけません。 解説記事も偏っていて、モーフィングだったり、ラインアートの記事はたくさんあるのですが、オブジェクトが重なっていくつもシャシャシャッと動くようなアニメーションを解説している記事となると極端に少なくなります。 というわけで、そんなアニメーションを勉強がてら作ってみました！ まずは全体のイメージを作る 今回は試しに、スマホ上にカード形式のタイトル・ディスクリプションが並ぶようなものを作ってみようと思います。 以下のような感じです。 Illustratorを使って作成しました。 Illustratorでなくても、パスが書けるようなツールで、なおかつsvg形式で書き出せるものであれば何でも良いと思います。（sketchとかで
Twitterで草を生やせるTwithubを作った - Qiita
リンク Twithub リポジトリ サイトの内容 Twitterのつぶやきの頻度に応じて草を生やしたヒートマップを描画するサイトです 過去のつぶやきの取得には外部サイトであるTwilogのcsvを使用しています(ユーザーが多そうなため) Twilogはすぐ登録できますし、Twilogの設定内ですぐ過去3000件のツイートが取得できるので新規ユーザーの方も大丈夫です csvの読み込みはそんなに時間かからないのでちょっとの手順で見れると思います 今後の課題はスマホからの動作とツイート時の結果画像添付です 背景 QiitaHubに触発されて作りました 正直誰か作ってるやろと思ったが反応を見るにいないっぽい？ 意外と作りたかった人が多いことに気づく 月曜日にアイデアを思いつき、火曜日に開発しあとはちょくちょく触りつつ土曜日にリリースしたので一週間くらいでできました Twitterにツイートしたらわ
超簡単！imageminで画像圧縮のタスクを作ってみる【拡張子全部乗せ2018】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのザワです。 この夏、いい思い出はつくれていますか？ そうでもない？ でも、嫌な思い出は全部圧縮しちゃえばいいじゃない！ ということで、今回はフロントエンドのパフォーマンスを考える上で避けては通れない、画像圧縮のタスクを作ってみたいと思います。 「作る」と言っても、公開されているnpmパッケージを組み合わせて画像圧縮タスクを作っていくかたちになります。出来合いの惣菜を組み合わせて、簡単にお弁当を作るイメージですね。記述量も短く、すぐにできてしまうためにちょっと不安になりますが（これで本当にうまく動いているのかな、ってね）、惣菜だってレンジでチンするだけで美味しく食べれるんだから、理屈としては充分でしょう。 ちなみに「画像圧縮しよう」と心に決めた場合、npm scriptsだったり、ツールを使ったり、など選択肢はたくさんあります。 我が社が誇るスーパーフル
Parcel – The zero configuration build tool for the web.
The zero configuration build tool for the web. JavaScript. CSS. HTML. TypeScript. React. images. SASS. SVG. Vue. libraries. Less. CoffeeScript. Node. Stylus. Pug. Electron. Elm. WebGL. extensions. GraphQL. MDX. XML. Parcel combines a great out-of-the-box development experience with a scalable architecture that can take your project from just getting started to massive production application.
SVGをもっと活用するために使いたい·svg.js MOONGIFT
svg.jsはアニメーションやイベント駆動型のSVGを実現するライブラリです。 SVGはまだ広く利用されているとは言いがたいですが、ビットマップではなくベクターデータなので拡大してもきれいなど特徴が多数あります。今回紹介するsvg.jsはSVGを使ったアニメーションを実現するライブラリになります。 デモです。単純なオブジェクトの生成、移動、中央寄せが簡単に指定できます。 クローンして重ね合わせ。重心の判定、傾けるのも手軽です。 X軸、Y軸のずらし。塗りつぶし。 枠だけを描く、グラデーション（線形、円形）。 クリック、マウスオーバー、画像マスクもできます。 クリックしたオブジェクトだけ色を変更します。 さらにアニメーションも自在に。 プラグインによる拡張もサポート。 svg.jsを使えばアニメーションはもちろんのこと、画像を重ねて表示したり、マウスイベントによって形状や色を変更したりすること
Web Graphical Platform
2012年5月9日 Acroquest Technology、HTML5+CSS3+JavaScriptによる グラフィカルなWebUIを開発するためのプラットフォーム 「Web Graphical Platform」をオープンソースとして公開 ネットワークインフラ向けにミッションクリティカルシステム開発／コンサルティングを行うAcroquest Technology株式会社（以降、Acroquest）は、2012年5月9日、HTML5+CSS3+JavaScriptによるグラフィカルなWebUIを開発するためのプラットフォーム「Web Graphical Platform（以降、WGP）Ver. 0.1」をオープンソースとして公開しました。 WGPは、当社の製品であるENdoSnipe（※1）の運用監視機能であるDashboardを実現する基盤として開発したものです。WGPはjQuery
Compare Free Open Source Software
Laboratory Information Management System All of our products are built from the ground up to help laboratories improve productivity. While most LIMS systems take a year or more to implement – the LABTRACK LIMS can be up and running in your laboratory in just a few days or weeks. Its simple, intuitive design and the built-in Forms Definition, Menu Customization Module, and Custom Reporting Tool mak
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - canvg/canvg: JavaScript SVG parser and renderer on Canvas
GitHub - wa0x6e/cal-heatmap: Cal-Heatmap is a javascript charting library to create a time-series calendar heatmap
Cal-Heatmap | Cal-Heatmap
GitHub - kevinsqi/react-calendar-heatmap: An svg calendar heatmap inspired by github's contribution graph
Vue Fes Japan 2018 サイトの速度改善 / High Performance Vue Fes Japan Site
PKSHA Technology Inc.
SVG Patterns Gallery