💎

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

2022/09/21に公開約1,200字

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


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

感想

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

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

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

感想


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

感想

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

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

Discussion

ログインするとコメントできます