Meguro.css#9
https://gyazo.com/501bb358367fe16bbdd9dc0bb626e625
https://megurocss.connpass.com/event/300400/
ユーザースタイルシートや拡張機能で作る広告ブロック入門
Kaitou
株式会社メタップスホールディングス
ユーザースタイルシート
ユーザー側でスタイルシートを当てられる機能
Chromeにはデフォルトで機能がない
StylusとかStylishとか
code:css
#TBD { display: none; } // Yahoo!Japanの広告を消せる
Chrome拡張機能を作ろう
パッケージ化されてない拡張機能から作ったものを読み込む
2020年から2023年までのCSSの変遷を振り返る
yamanoku
Scroll-driven AnimationsとCSSの進化
degudegu2510
Qiita
Increments株式会社
スクロール駆動アニメーション
Scroll Progress Timeline
スクロールできるコンテナ全体の位置でアニメーションさせる
animation-timeline: scroll()
x軸も適応できる
パララックスの表現ができる
View Progress Timeline
ビューポートを判定にしてアニメーションさせる
animatetion-timeline: view()
animation-range
対応ブラウザはChromeのみ
カスタムプロパティのアニメーション
katashin
アニメーションを実装するときに活用できそう
sin()
ここでカスタムプロパティを使用する
sin(var(--x))
@propertyで厳密に指定する必要がある
WWDC23の発表で面白いのがあった
アニメーションはバネを使っている
iOSでどうやってやってるのか
数学関数を使って表現している
https://github.com/ktsn/css-spring-animation
プラグイン作った
アニメーションはパフォーマンスが重要
transform, opactity は速い
カスタムプロパティは速くない
1fmごとにレンダリングが走るようになってしまう
今後パフォーマンスは良くなるような検討されている
2年ぶりにCSSアニメーションを作ったよ！
うえむー
https://codepen.io/uemuragame5683
スイカゲームをオマージュにしたCSSアニメーションを作ってみる
絵コンテを作ってイメージをつくる
SVG化する
Trace Pixels To Vectors in Full Color, Fully Automatically, Using AI - Vectorizer.AI
無料で使えるツール
webpack+pug+css
感想
完成したときの達成感がすごい
絵を書くような楽しさ
animationのdelay設定に小数点あるとアニメーションが任意に動かない
とくにSafari
CSSだけでCookie Clickerを作る
h4topigeon
株式会社クロスビット
input type="checkbox"
チェックされたinputを見えないところに飛ばす
:checked のものを conter-incrementで計算する
inputよりも先にあるとカウントアップできないらしい