フロントエンド初学者です。
サイトのなかでイラストの配置を自由にコントロールできるようになりたいです。
理想：
グラフィックデザイン上でのあしらいを動かす感じ。スクロールで飛び足してきたり動いていたり、楽しい感じを表現できるようになりたい。
どのように製作すれば良いのでしょうか？
cssのpositionを使い、px単位でひたすら細かく位置を設定する、スクロールで動くのはjavascript？と考えていますが、レスポンシブ対応が難しそうだったり、もっといいやり方があったりするのかと気になっています。。。
補足：
イラストの動きを使った好きなサイト、面白いサイトをご存知でしたらぜひ教えてください🙏
スクロールで飛び足してきたり動いていたり
上記に関しては色々なアプローチがあると思いますが、JavaScriptのIntersectionObserverとかでシンプルに実現できると思います。
cssのpositionを使い、px単位でひたすら細かく位置を設定する
positionを使ったアニメーションはブラウザのレンダリング負荷が高いのでtransformのtranslateやrotate,scaleなど、またはそれらを独立させたプロパティtranslateなどを用いた方が良いと思います。
あと、アニメーションに関してはCSSの@keyframesも検討に入ってくるかと思います。
イラストの動きを使った好きなサイト、面白いサイトをご存知でしたらぜひ教えてください🙏
とりあえずは上記とかでしょうか。他にも検索すればギャラリー系のサイトで多くヒットすると思います。
参考になりますと幸いです。
@oginoshie
Questioner
@benjuwan さま
ありがとうございます！
なぜかtransformのイメージはpositionと一緒に使うもの、という固定観念がありました...
transformやtranslateを使いこなして思い通りの表現ができるように頑張ります！
IntersectionObserverはまだ知らなかったのでタメになりました。
いろいろなアプローチがあるなかで、スッキリシンプル（かつできれば細かく制御したい）が目標なので、参考にさせていただきます。
サイトのご紹介も嬉しいです！ありがとうございました！
