指定位置に来たら要素をボーダーで囲むには？

色々と試してみるのですが、いまいち仕組みが理解できず実装ができずアドバイスをお願いできればと思います。

行いたいとこは、特定の要素が画面に入った際に、borderがアニメーションで始まって囲んでいくというものです。borderが上から、　→↓←↑の流れで動いていくイメージです。
スクロールの検知は実装しています。

ただ、どのようにボーダーの線を走らせるのかが理解できておらずうまくいきません…。
動きのイメージとしてはこちらのサイトに掲載されている、
https://goworkship.com/magazine/css-border-effec …

CSS Border Transitions内の、Drowの動きになります。
ただ、こちらのサイトで紹介されているものは、マウスオーバー時に発火するため、なんとなくhoverというのは理解できるのですが、スクロールで表示された際に走らせるにはどうしたらよいものでしょうか？
おわかりになる方いらっしゃいましたらアドバイスを頂けますと幸いです。
宜しくお願いいたします。

No.1 ベストアンサー 回答者： fujillin 回答日時： 2021/08/08 21:41

こんばんは

＞どのようにボーダーの線を走らせるのかが理解できておらず
ごく簡単に言えば、元のboxと同じサイズのboxを疑似要素（before,after)で二つ作っておいて、それぞれに例えば「上右」、「下左」の枠線を受け持たせます。
この要素のwidth、heightを順に 0→100%にCSS transitionで変化させることで、枠線が伸びてゆくように見せています。
（width、heightで行っているため、1つの要素では枠線2つまでしか受け持てない）

＞スクロールで表示された際に走らせるにはどうしたらよいものでしょうか？
トリガーを置き換えればよいですね。
簡単なのは、要素にクラス属性を付与することでしょうか。

＞スクロールの検知は実装しています。
とのことですので、わかり易い手順として・・・

1）まず、参考サイトの内容をそのまま実装します。
　（hoverで動作することを確認してください）
2）CSSの「〇〇:hover::before」などのトリガーをクラスに変更します
　（例えば「active」クラスなら、「○○.active::before」といった要領）
3）スクリプトで「検知」したら、対象要素にactiveクラスを付与すれば
　そのタイミングで、ボーダーが表示されるようになります。
　（整合さえしていれば、クラス名はなんでもよいです）

※ 意味がわかれば、1）は省略して直接 2）から始めればよいでしょう。

この回答へのお礼

有難うございます！
動作のCSS側はまだ把握しきれていない部分がありますが、何とかスクロールでの発火することができました。
別途jqueryにてclass指定を行い、そのclassがスクロール位置に来たらaddClassで今回::beforeなどのCSSにつけたclass名を付与するようにいたしました。
今度はもう少し記述内容を確認してみたいと思います。
詳しいご解説有難うございました。

お礼日時：2021/08/10 08:54