JavaScriptで要素をドラッグして移動する簡単な方法 - Qiita
要素をドラッグして移動することは、JavaScriptにおいて頻出パターンです。 しかし、それを簡単に実現するコードは意外と知られていません。 <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove = function(event){ if(event.buttons){ this.style.left = this.offsetLeft + event.movementX + 'px' this.style.top = this.offsetTop + event.movementY + 'px' this.style.position = 'absolute' this.draggable = false this.setPointe
CSSの進化がすごすぎる！ 2つの画像を比較するスライダーは数行のコードで実装できるようになりました
2つの画像を重ねて表示し、画像を比較できるスライダーを実装するには、今まではJavaScriptのライブラリなどを使用していたかもしれません。 ほんの少しのJavaScriptと、あとはシンプルなHTMLとCSSで2つの画像を比較するスライダーを実装するテクニックを紹介します。 まずは、実際の動作をデモページでご覧ください。縦線のレンジバーをマウスでドラッグすると、2つの画像を比較できます。 See the Pen Easy comparison slider by coliss (@coliss) on CodePen. HTMLはシンプルです。2つの画像をsectionで内包し、縦線のレンジバーをinput type="range"で実装します。 <div class="compare"> <section class="before"> <img src="Runner.svg" a
JavaScriptで水や波、パーティクル等、ふわふわゆらゆら系の動きを表現 | Webクリエイターボックス
2018年8月6日 JavaScript, jQuery Webサイトのアクセントに、ちょっとした動きをつけたい時ってありますよね。一から作り込むのは大変ですが、プラグインを使えば意外と簡単に実装できますよ。夏らしい涼し気なデザインになりそうです。サンプルがうまく動かない時はデモ画面右上の「EDIT ON CODEPEN」をクリックして別タブで表示してみてください！ ↑私が10年以上利用している会計ソフト！ wavify See the Pen wavify Demo by Mana (@manabox) on CodePen. GitHub wavifyはjQueryのプラグイン。ふよふよと動く波を表現できます。jQueryとTweenMax、wavifyのファイルを読み込み、SVGコードを用意すればOK。 HTML <body> コンテンツ ・・・ <!-- SVG --> <svg
SVGのpathを使ったモーションパスアニメーションの実装方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、おじいちゃんです 今回はSVGのpathを使ったモーションパスアニメーションの実装方法について書きたいと思います。 【こちらもおすすめ】 ☞ SVGとjQueryで絵を描いているようなアニメーションを実装する方法 SVGのpath要素 path要素を使うことで、好きな図形を描くことができます。 Illustratorを使っている方はよく使ってますよね。Illustratorで描いたパスからSVGを書き出して使うこともできるのですが、今回は直接SVGタグのpath要素に描いて作ってみましょう。 d=”M 50,50 L 200,50 Z” SVGでpathを描く場合は、上のように各コマンドにパラメータをいれることでpathを描画できます。少しクセがありますが、自分で好きなpathを描いてみると慣れてきますので、遊んでみてください。 pathを描画するためのコマンドは下記があります
d3.jsでスゴイっぽい図(force layout)を作ってみたら思ったより簡単だった件 - Qiita
スゴイっぽい図((force layout))って何 こんな感じの、なんかビヨーンとなってシャキシャキして動くやつ。 説明するより動くものを見てもらった方が早いかも。 作ったdemo やってみた感想 グワングワン動いて楽しい 動的な描画をするのは難しそうだと思ってたが、そうでもなかった。 d3.js自体も難しいものだと避けてきたが、たくさんの人が記事にあげてくれているからググればなんとかなる。 実際に何かに使うには、描画したいデータを必要なフォーマットに直すところがちょっと大変そう。 解説 0. 全ソース 一旦全ソースを貼ってみる。 コピペしていくつかの値をいじってみるだけでも楽しい。 <!DOCTYPE html> <html> <head> <title>d3test</title> <script src="http://d3js.org/d3.v3.min.js" charset=
SVGで綺麗なグラフを描くライブラリ×10選
HTML5でグラフを描く方法は幾つかあります。一つはCanvasを使った方法です。これは高度なグラフィックスが描ける一方、JavaScriptなどからインタラクティブに扱うのは複雑になっています。 そこで今回はSVGを使ったグラフライブラリを紹介します。SVGはXMLベースで軽量、かつJavaScriptとの親和性も高いものが多くなっています。 morris.js morris.jsは主に折れ線、棒、曲線、ドーナッツグラフをサポートしています。データをJSONで渡すだけで使えるので学習コストが低いのがメリットです。ライセンスは簡易BSD Licenseとなっています。 Chartist – Simple responsive charts Chartistはレスポンシブであることをメリットとしています。曲線、棒、円、ドーナッツグラフをサポートしています。ブラウザはIE9以降を対象としていま
SVGでプログラマブルな書体を作る話｜dwango creators' blog（ドワンゴクリエイターズブログ）
こんにちは、2016年度にデザイナー職で新卒入社しました@Ln_northです。新卒研修も終わり、現在はOJTのもとで生放送チームにジョインしています。 さて、Googleのロゴが変わっていくらか経ちますが、このロゴはSVGを使うと少ないデータ量で表現できるというニュースが話題になりました。 この記事を見た際に、厳密には視覚調整が入るはずなので、正確に幾何的図形とは一致しないだろうという感想も抱きました。しかし、SVGで文字を生成するということには非常に興味を持ちました。今までにも、文字のアウトラインを使ったアニメーションや表現はありましたが、文字自体を生成するというものは見たことがなく、そしてSVGはJavaScriptで操作することができるため、書体の印象が動的なフォントを作ることができると考えたからです。 どういうことかというと、例えば であるとか、 といったことができるかもしれない
JavaScriptでCSSを操作する方法 | スターフィールド株式会社
のように記述すれば操作ができます。 ただ、案件によってはjQueryのが利用できなかったり、 対象の要素がSVGなどでブラウザによって認識されないなど、 jQueryを使わずにJavaScriptでCSSを操作する必要があります。 そこで、JavaScriptでのCSSの操作方法をまとめてみました。 var target = document.getElementById("example"); //対象要素をIDで指定 var target2 = document.getElementsByTagName("div"); //対象要素をタグで指定 var target3 = document.getElementsByClassName("example"); //対象要素をクラスで指定(IE9以上) target.style.color = "red"; //colorを設定 targ
面倒なSVGのパスを簡単に作成できてしまう便利ツール -SVG Path Builder
面倒で複雑なSVGのパスでも簡単に作成できてしまう便利ツールを紹介します。 オンラインでもローカルでもどちらでも利用できます。
高度なアニメーションパス(Advanced animation path)作成 | 「SVG(画像効果)」カテゴリー | JavaScriptデモ
概要 高度なアニメーションパス(Advanced animation path)作成 ・アニメーションのためにJavaScriptトゥイーンエンジンtweenjsを使用 依存ライブラリ ・tweenjs tween.jsとは？ ・CreateJSに含まれるJavaScriptトゥイーンライブラリ 基本的な仕組み ・アニメーションループ ・requestAnimationFrameで、tweenjsのupdateメソッドを定期的に呼出 //アニメーションのloop実行定義 animate = function(){ requestAnimationFrame(animate) TWEEN.update() } //アニメーションループ開始 animate() Link 動作確認 ・デモ 公開ページ ・Advanced animation path
作図系ツール・ライブラリまとめ
diag.md シーケンス図とかフローチャートをしごとで描画することになった場合、 テキストから生成できたら楽なので、それ系のツールまとめ GraphViz http://www.graphviz.org/ C製 Doxygen, Moinmoinなどと連携可能 ブロック図、クラス図、ネットワーク図など PNG, SVGなど 出力可能形式一覧 JavaScript（Emscripten）版もある。リアルタイムプレビュー出来て便利 https://github.com/mdaines/viz.js PlantUML Java製 シーケンス図, ユースケース図, クラス図, アクティビティ図, コンポーネント図, ステート図, デプロイ図, オブジェクト図などめっちゃたくさん作れる PNG, SVG, LaTeX, ASCII出力 なんとワイヤーフレームも作れる。アイコンとかも入れられる。 オ
Elastic Progress | Codrops
An elastic SVG progress loader based on the Dribbble shot “Download” by xjw and implemented with SVG and TweenMax. Today we’d like to share an interesting progress button effect with you. The effect is based on a very nice Dribbble shot called “Download” by xjw. The button starts as an icon with an arrow and once it’s clicked, it animates into a fun little wire and a label that indicates the downl
flowchart.js
st=>start: Start:>http://www.google.com[blank] e=>end:>http://www.google.com op1=>operation: My Operation sub1=>subroutine: My Subroutine cond=>condition: Yes or No?:>http://www.google.com io=>inputoutput: catch something... para=>parallel: parallel tasks in=>input: some in out=>output: some out st->op1->cond cond(yes)->io->e cond(no)->para para(path1, bottom)->sub1(right)->op1 para(path2, top)->o
JavaScriptで変な形のクリック領域を作るとき、svgが便利 - MANA-DOT
昨日のVieraのリモコン、リモコンを作りたかったのもあるけど、svgとJavaScriptを組み合わせた簡単なプログラムを試しに書いてみたかったというのがあります。 html5ではsvgをhtml中に埋め込んで、更にそのsvgにcssでスタイルを当てたり、JavaScriptでいろいろやったり出来ます。 この時、要素のクリック領域は要素の形そのままなので、昨日のリモコンのような変な形のクリック領域を簡単に作ることが出来ます。 以下の画像の色のついた箇所にマウスを乗せたりクリックをしたりしてみてください。 100km 画像はWikipediaより。 上記の画像は、クリックできる箇所に .svg-area というクラス名と、data-name属性に市町村の文字列が入っており、以下の様なcss/jsによって動作を実現しています。 path.svg-area { cursor: pointer;
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
anime.js