inview.jsだと要素ごとにJavascriptを書いたり、eachかけて特定の要素に書いたりとかをいちいち自分でやらなきゃいけなかったけど、class="inview"を付与すれば、付与した要素全てに適用されるようにした。
基本体にはAnimate.css導入が前提だけど、class="inview"が付く全ての要素に「animate__slideInLeft」をclassとして付与してるだけだから、Animate.cssを入れておかなきゃアニメーションは起きないし、画面内に入った時に付与するclassをAnimate.cssとは関係ないものにしておいてもアニメーションしない。
その場合は画面内に入ったら特定のclassが付くという処理だけを行うものになる。
逆に言えば、自分独自のclassを付与して、自分独自のアニメーションをcssで作っちゃうなんてことも可能。
例えば画面内に入ったらふわっと文字色が変わるとかね。
Javascriptを操作せず、汎用性を確保することが目的だったから、まぁこんなもんでしょ。
Geminiくんには「画面内、画面外を判定する」とうコードを書いてもらって、data属性でオプションを指定できたり、カンマ区切りで複数のclassを付与したり削除したりする構想は自分のアイデアって感じ。
ほんで書いたコードをGeminiくんに投げて「min化して」って言えばやってくれるしね。
もちろん開発するうえでの前提知識は必要なんだけど、いちいち書く手間が省けるし、アイデアを形にする速度が段違いになる。
コードを手作業で書くことよりも「コードは書ける前提でアイデアの方が大事」ってことだろうな。
AI様々ですわ、ホンマに。