Download to read offline
CSSから国民を守る党ver2
- 2. 自己紹介 • 暁の流星 • 奈良高専情報科 •普段JSで色々してる • Twitter @nomber1910 @1910akatsuki • GitHub Akatsuki1910
- 3. 注意事項 • 奈良高専TalkCafeでの改良版です • JavaScriptをひいきした内容です •決して戦争を起こすわけではないのであしからず • 出てくる登場人物や名前は全てノンフィクションだったりします • 頭が弱いです
- 4. 政党公約文(あらすじ) • CSSAnimationとかいうものが最近(党設立当時)できたので、JavaScript(以下 JS)を愛する上級国民様方から守るというものです • JSにはcanvasタグというものがあり、ライブラリを使うことによってアニ メーションができる •また、requestanimationframeで色んなことができる • CSSでできないような芸当をみせてJSの格の違いを見せつける CSSをぶっ壊す!!!
- 5.
- 6. • 説明 • WebGLを簡単に使えるようにしたやつ •Adobe Flashの代わりになる • 2D • 利点 • めちゃめちゃ軽い(WebGLだから) • 欠点 • 公式リファレンスが読みにくい(サンプル解読がデフォ) • 書き方がすぐかわるのでバージョンあげるのが怖い まず使用するスクリプト
- 7.
- 8. CSSスキャンダル 1. borderで四角を作る 2. 上の太さを0にする 3.右と左を透明にする 4. 高さを下の幅×√3をする ↑ 手計算で出さなければならない
- 9.
- 10.
- 11.
- 12. • 説明 • WebGLを簡単に使えるようにしたやつ •3D • 利点 • めちゃめちゃ軽い(WebGLだから) • サンプルが面白い • 欠点 • ゴリゴリやると重い まず使用するスクリプト
- 13.
- 14. なんで回るんだよお前 MDN web docshttps://developer.mozilla.org/ja/docs/Web/CSS/transform-style
- 15.
- 16.
- 17. 何がどうなってるか(CSS) • みんなの味方SCSSを使用 • カッコ大事 •四角を作る … ① • 角を直径が四角の幅になるような円にする … ➁ • 二個 対角に角を作る … ③ ① ➁ ③ ここまでが花びらを作成する方法
- 18.
- 19.
- 20.
- 21.
- 22. この結果より • CSSは簡単なアニメーションに向いている • JavaScriptは複雑なアニメーションに向いている •どちらも図形を描くのには一苦労 • よってJavaScriptはCSSより上回ってる(暴論)
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29. どういうことだってばよ • CSSでは止めたり動かしたりといった複雑な動きをするのが難しい • いちいち%で指定しなければならない •いい感じにヌルヌルさせるためには実行時間や間隔を決めなければならない • でもJavaScriptなら全部できるよね • ↑でもお前フェードインとかできないよね
- 30.
- 31. 党(JavaScript)の今後について • どうしてもスクリプトを使用しないといけない • WebGLを直書きできるようになる •CSSで出来ることをJavaScriptで出来るようにする • jQueryは…ちょっと… • animationを書きやすくする • 時間諸々の管理がめんどくさい
- 32.