ねっとぱんだ-プログラミング勉強ブログ-

Webデザイン、プログラミングの勉強ブログ。

2017-06-05から1日間の記事一覧

【javascript・SVG】SVGの基本とjavascriptを使ってのアニメーション

svg scalable Vector Graphics 拡大縮小してもきれいに見える XMLで書かれている svgタグの書き方 <svg width="600" height="300" viewBox="0 0 400 200"> <rect width="400" height="400" fill="red"/> <rect width="100" height="50" fill="blue"/> </svg> 閉じタグない物には「/」を末尾につける。 下に書いたものの方が描画するとき上に描画される rect 四角形を作れる。 viewbox svgのどの位置を枠の中に表…

【javascript・css3】jsで作るtoggleメニュー

DEMO 目標 Timer処理でのスライドイン・アウト表現 javascriptでcss3のアニメーションを動かす 反省、改善点 コードの簡略化 heightを自動で取得できるようにする。 css3でもう少し簡単にかけるかもしれない。 コード html <div> <p id="nav_btn"> <span id="mark"> <span></span> <span></span> </span> </p> <ul id="toggle_menu"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li></li></ul></div>