個人的に使っておきたいスニペット。まずはjQuery を使わずに実装する Vanilla JS & CSS Only スニペットを展開します、コピペですぐ使えます。
収録スニペット
| カテゴリ | スニペット | CSS Only |
|---|---|---|
| Modal | ベーシックモーダル（開閉・ESC・オーバーレイ・スクロールロック） | :target |
| Drawer | ドロワーメニュー（左スライドイン） | checkbox hack |
| ページ内リンク | スムーススクロール / トップへ戻るボタン | scroll-behavior |
| カルーセル | カルーセルスライダー（前後ナビ・ドット・自動再生・スワイプ） | scroll-snap |
| アコーディオン | アコーディオン（排他モード対応） | <details> / <summary> |
| Scroll Reveal | スクロール表示アニメーション（IntersectionObserver） | animation-timeline |
| タブ | タブ切り替え | radio button |
| ハンバーガー | ハンバーガーメニュー（アニメーション付きアイコン） | checkbox hack |
| DOM操作 | クラス操作 / イベント登録 / Ajax(Fetch) / DOM走査 / スタイル・属性 | — |
| トースト | トースト通知（自動消去） | — |
| ツールチップ | ツールチップ（ホバー表示・動的位置調整） | ::after + attr() |
今後追加していくのでよろしくお願いします！
岡崎龍夫
Eclo編集長。デザイナー、エンジニア、コンサルタント、ライターなど様々な職域を持つがもともとは俳優。表方の舞台活動から裏方のアートマネジメントに移行し、都内で舞台のプロデュースを手がけてるうちに、デザイン、WEB開発、マーケティングといった職能を身につける。趣味はDJとアザラシ探訪。現在は合同会社elegirlを設立し、WEBの企画、開発、コンサルティングを中心に活動している。