JavaScript Archives(ジャバスクリプト アーカイブス)

WEB制作に必要なJavaScriptをアーカイブするサイト

メニュー

月別: 2015年10月

図形外でダブルクリックすると移動出来る様になる

taka_oj
|
2015年10月28日
| コメントはまだありません
| JavaScript、SVG

図形以外の領域でダブルクリックすると図形が移動できる様になる。 また、ダブルクリックすると図形の回転ができる様になる。 移動と回転をダブルクリックで切り替える。 JavaScript部分の「イベントのリッスンを開始する( […]

もっと読む »

カテゴリー: JavaScript、SVG コメントする

JavaScriptでSVGのrectを並べて横棒グラフを描画する

taka_oj
|
2015年10月28日
| コメントはまだありません
| JavaScript、SVG

カンマ区切りの数値の列(1列のみ)と対応する色を指定するだけで、簡単に横棒グラフが描けます。

もっと読む »

カテゴリー: JavaScript、SVG コメントする

CSSのtransformで立体化した図形にonmousemoveすると、どの要素の上に乗っているかを調べる

taka_oj
|
2015年10月27日
| コメントはまだありません
| JavaScript、SVG

枠線で囲まれたdiv内にマウスが入った際に、マウス下にある要素名を返します。 (MouseEvent の toElement.localName の値を拾っています) 角錐では側面の三角形を描画するとどうしてもsvg上に […]

もっと読む »

カテゴリー: JavaScript、SVG コメントする

立方体をドラック&ドロップで移動する

taka_oj
|
2015年10月27日
| コメントはまだありません
| JavaScript、SVG

クリックして回る正六面体をドラック&ドロップで移動するJavaScriptの例です。 図形上をドラックしながらマウスアウトし、図形以外の領域でドロップするとドロップした時点まで、図形を移動させる。

もっと読む »

カテゴリー: JavaScript、SVG コメントする

JavaScriptでSVGのpolygonを生成し、CSSのtransformで多角錐にする

taka_oj
|
2015年10月26日
| コメントはまだありません
| JavaScript、SVG

CSSのtransformで多角柱を組み立てる応用で、側面を三角形にすることで角錐をつくっています。高さの指定はcss transformのscaleY()で縦方向に伸び縮みさせることで調整しています。 角数を指定するだ […]

もっと読む »

カテゴリー: JavaScript、SVG コメントする

立方体をクリックしながら回す

taka_oj
|
2015年10月26日
| コメントはまだありません
| JavaScript、SVG

正六面体上をクリックして回すJavaScriptの例です。

もっと読む »

カテゴリー: JavaScript、SVG コメントする

JavaScriptでSVGのpolygonとrectを生成し、CSSのtransformで多角柱にする

taka_oj
|
2015年10月23日
| 1件のコメント
| JavaScript、SVG

Circle上に多角形Polygonを描画すると同等の手法でフタになるポリゴンを生成し、この円を基準に側面rectの位置合わせに利用しています。 角数を指定するだけで3角柱~円柱(ただしとても処理が重たくなる)まで生成で […]

もっと読む »

カテゴリー: JavaScript、SVG 1件のコメント

SVGのpolygonで生成した正三角形の回転の中心を比較

taka_oj
|
2015年10月23日
| コメントはまだありません
| JavaScript、SVG

SVGのpolygonで正三角形を生成し、その三角形の中心を回転の中心と重ねています。 三角形の中心点の座標(x,y)は(x1+x2+x3)/3 , (y1+y2+y3)/3 で得られるので、polygonを生成する際の […]

もっと読む »

カテゴリー: JavaScript、SVG コメントする

JavaScriptからSVGのCSS・Styleを操作して立方体を回転させる

taka_oj
|
2015年10月19日
| コメントはまだありません
| JavaScript、SVG

SVGで6枚のパネルを生成し、 transform-style: preserve-3d や transform:rotate()などをCSSで指定し立方体にします。 そこから立方体を含むdivに対して、JavaScri […]

もっと読む »

カテゴリー: JavaScript、SVG コメントする

JavaScriptからSVGのCSS・Styleを操作してX,Y,Z軸それぞれに対して回転させる

taka_oj
|
2015年10月19日
| コメントはまだありません
| JavaScript、SVG

SVGで生成された3枚のパネルをJavaScriptからCSSのスタイル変化させることでアニメーションさせます。 複数のsvgを重ねて描画するために、svgを含むdivに対して position:relative を、 […]

もっと読む »

カテゴリー: JavaScript、SVG コメントする

投稿ナビゲーション

1 2 … 5 次へ

検索

最近の投稿

  • 【CSS】文字が浮き上がる-Opening type-
  • 【JavaScript】multiscrollプラグインを使って、かっこいい動きをつけよう
  • 【JavaScript】幾何学でページ背景に動きをつけよう
  • 【javascript】どこでもBINGO大会!その2 【ビンゴカード】
  • 【jQuery】スクロールしたら途中からヘッダーを固定する

最近のコメント

  • jQueryでフィルタリング に マツイ より
  • jQueryでフィルタリング に Takaya より
  • jQueryでフィルタリング に マツイ より
  • javascriptを使ってカラーコードを表示させよう! に Takaya より
  • javascriptを使ってカラーコードを表示させよう! に ふみ より

アーカイブ

  • 2021年4月
  • 2020年5月
  • 2020年4月
  • 2019年9月
  • 2019年3月
  • 2018年10月
  • 2018年3月
  • 2017年10月
  • 2017年3月
  • 2016年3月
  • 2015年10月
  • 2015年6月
  • 2015年5月
  • 2015年3月
  • 2015年2月

カテゴリー

  • CSS
  • JavaScript
  • SVG

メタ情報

  • ログイン
  • 投稿フィード
  • コメントフィード
  • WordPress.org

検索

カテゴリー

  • CSS (1)
  • JavaScript (120)
  • SVG (21)

アーカイブ

  • 2021年4月 (1)
  • 2020年5月 (1)
  • 2020年4月 (6)
  • 2019年9月 (1)
  • 2019年3月 (5)
  • 2018年10月 (5)
  • 2018年3月 (7)
  • 2017年10月 (17)
  • 2017年3月 (4)
  • 2016年3月 (19)
  • 2015年10月 (42)
  • 2015年6月 (2)
  • 2015年5月 (4)
  • 2015年3月 (6)
  • 2015年2月 (1)

JavaScript Archives(ジャバスクリプト アーカイブス) 2023 . Powered by WordPress