💎

[やってみた]アップルやテスラのWebレイアウト再現テクニック集

2022/09/21に公開

はてぶで見つけてしばらくCSSのキャッチアップしてなかったのでやってみた。
元記事
 リポジトリん

Apple編 – スクロールでセクションが重なるCSSエフェクト

感想

以前仕事で担当した案件でも同じような実装をした。

案件ではGSAPが絡んでいたので難しく感じたが、基礎がわかってよかった。
背景固定 + テキストはスクロール可　という実装もやってみようと思う。

Tesla編 – 美しいほどなめらかなフルページのスワイプエフェクト

感想

縦スクロールバージョン時の画像間の余白が気になる。多分CSSで消せる。
いい感じに横スクロールするページが簡単に実装できてびっくり。
scroll-snapシリーズ使いこなせたらかなり便利そう。調べたら2018年に登場したっぽい。全然知らなかった・・恥
scroll-snap-type - CSS: カスケーディングスタイルシート | MDN
CSSでスクロールのスナップが可能に！scroll-snapプロパティの基礎知識と便利な使い方

Apple編 – ハンバーガーメニューの美しいアニメーション

感想

checkboxのcheckedをトリガーに動くハンバーガーメニューの実装。

サンプルではbuttonタグがあったけど必要ない気がして入れなかった。
input:checked + 〇〇をいい感じに書き直したい

Discussion